@parhelia/localization 0.1.12788 → 0.1.12790

package/dist/translation-center/TranslationBatches.js

@@ -0,0 +1,995 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState, useMemo } from "react";
+import React from "react";
+import { Button, Select, Input, UserPicker, Popover, PopoverContent, PopoverTrigger, ContentTree, fetchItemStubs, searchUsers as searchBackendUsers, useEditContext, getLanguages, SimpleIconButton, } from "@parhelia/core";
+import { listBatches, getTranslationProviders, listBatchTranslationJobs, abortBatch, deleteBatch, } from "../services/translationService";
+import { useDebouncedCallback } from "use-debounce";
+import { X, ChevronDown, Languages, Loader2, Calendar, CheckCircle2, User as UserIcon2, Cloud, Globe, FileText, FolderTree, ExternalLink, Check, AlertCircle, CircleStop, Trash2, Hourglass, Copy, Sparkles, } from "lucide-react";
+import { toast } from "sonner";
+// Wrappers for lucide-react icons to work with React 19
+const XIcon = (props) => React.createElement(X, props);
+const ChevronDownIcon = (props) => React.createElement(ChevronDown, props);
+const LanguagesIcon = (props) => React.createElement(Languages, props);
+const LoaderIcon = (props) => React.createElement(Loader2, props);
+const CalendarIcon = (props) => React.createElement(Calendar, props);
+const StatusIcon = (props) => React.createElement(CheckCircle2, props);
+const UserFilterIcon = (props) => React.createElement(UserIcon2, props);
+const ProviderIcon = (props) => React.createElement(Cloud, props);
+const GlobeIcon = (props) => React.createElement(Globe, props);
+const ItemIcon = (props) => React.createElement(FileText, props);
+const FolderTreeIcon = (props) => React.createElement(FolderTree, props);
+const ExternalLinkIcon = (props) => React.createElement(ExternalLink, props);
+const CheckIcon = (props) => React.createElement(Check, props);
+const AlertCircleIcon = (props) => React.createElement(AlertCircle, props);
+const AbortIcon = (props) => React.createElement(CircleStop, props);
+const TrashIcon = (props) => React.createElement(Trash2, props);
+const QueuedIcon = (props) => React.createElement(Hourglass, props);
+const CopyIcon = (props) => React.createElement(Copy, props);
+const SparklesIcon = (props) => React.createElement(Sparkles, props);
+const DATE_RANGE_OPTIONS = [
+    { value: "lastHour", label: "Last Hour" },
+    { value: "last24hours", label: "Last 24 Hours" },
+    { value: "today", label: "Today" },
+    { value: "last7days", label: "Last 7 Days" },
+    { value: "last30days", label: "Last 30 Days" },
+    { value: "last90days", label: "Last 90 Days" },
+    { value: "last6months", label: "Last 6 Months" },
+    { value: "lastYear", label: "Last Year" },
+    { value: "allTime", label: "All Time" },
+];
+const STATUS_OPTIONS = [
+    { value: "all", label: "All Status" },
+    { value: "in-progress", label: "In Progress" },
+    { value: "completed", label: "Completed" },
+    { value: "errors", label: "Errors Only" },
+    { value: "aborted", label: "Aborted" },
+];
+// Maps the UI status filter to the DB status string stored on the batch row.
+const STATUS_FILTER_TO_DB = {
+    "in-progress": "In Progress",
+    completed: "Completed",
+    errors: "Error",
+    aborted: "Aborted",
+};
+function isTerminalBatchStatus(status) {
+    return status === "Completed" || status === "Error" || status === "Aborted";
+}
+function isActiveBatchStatus(status) {
+    return status === "Pending" || status === "In Progress";
+}
+function normalizeGuid(value) {
+    return (value ?? "").toString().replace(/[{}()]/g, "").toLowerCase();
+}
+function dateRangeToFromUtc(range) {
+    const now = new Date();
+    const cutoff = new Date(now);
+    switch (range) {
+        case "lastHour":
+            cutoff.setTime(now.getTime() - 60 * 60 * 1000);
+            break;
+        case "last24hours":
+            cutoff.setTime(now.getTime() - 24 * 60 * 60 * 1000);
+            break;
+        case "today":
+            cutoff.setHours(0, 0, 0, 0);
+            break;
+        case "last7days":
+            cutoff.setDate(now.getDate() - 7);
+            break;
+        case "last30days":
+            cutoff.setDate(now.getDate() - 30);
+            break;
+        case "last90days":
+            cutoff.setDate(now.getDate() - 90);
+            break;
+        case "last6months":
+            cutoff.setMonth(now.getMonth() - 6);
+            break;
+        case "lastYear":
+            cutoff.setFullYear(now.getFullYear() - 1);
+            break;
+        case "allTime":
+            return undefined;
+    }
+    return cutoff.toISOString();
+}
+export function TranslationBatches() {
+    const editContext = useEditContext();
+    const [batches, setBatches] = useState([]);
+    const [providers, setProviders] = useState([]);
+    const [sitecoreLanguages, setSitecoreLanguages] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
+    const [hasMore, setHasMore] = useState(true);
+    const [currentOffset, setCurrentOffset] = useState(0);
+    const [itemIdOrPathInput, setItemIdOrPathInput] = useState("");
+    const [itemPickerOpen, setItemPickerOpen] = useState(false);
+    const [expandedBatchId, setExpandedBatchId] = useState(null);
+    const [expandedItems, setExpandedItems] = useState(new Set());
+    const [batchJobs, setBatchJobs] = useState({});
+    const [loadingJobs, setLoadingJobs] = useState(new Set());
+    const [abortingBatchIds, setAbortingBatchIds] = useState(new Set());
+    const [deletingBatchIds, setDeletingBatchIds] = useState(new Set());
+    // Cache of userName → displayName so we can render full names on batch rows
+    // without re-querying the user service every render.
+    const [userDisplayNames, setUserDisplayNames] = useState({});
+    // Monotonic request id — only the most recent in-flight request is allowed
+    // to write to state, so a slower earlier load can't clobber a newer one
+    // (e.g. when the user changes filters quickly).
+    const requestIdRef = useRef(0);
+    const currentUserName = editContext?.user?.name || "all";
+    const isLimitedPreviewUser = editContext?.user?.isLimitedPreviewUser ?? false;
+    const [filters, setFilters] = useState({
+        dateRange: "last30days",
+        status: "all",
+        user: currentUserName,
+        provider: "all",
+        targetLanguage: "all",
+        itemIdOrPath: "",
+        itemIncludeSubitems: false,
+    });
+    // Enforce current user filter for limited preview users
+    useEffect(() => {
+        if (isLimitedPreviewUser && currentUserName !== "all" && filters.user !== currentUserName) {
+            setFilters(prev => ({ ...prev, user: currentUserName }));
+        }
+    }, [isLimitedPreviewUser, currentUserName, filters.user]);
+    const effectiveFilters = useMemo(() => {
+        const userFilter = isLimitedPreviewUser ? currentUserName : filters.user;
+        const trimmedItem = filters.itemIdOrPath.trim();
+        return {
+            fromUtc: dateRangeToFromUtc(filters.dateRange),
+            status: filters.status === "all" ? undefined : STATUS_FILTER_TO_DB[filters.status],
+            user: userFilter === "all" ? undefined : userFilter,
+            provider: filters.provider === "all" ? undefined : filters.provider,
+            targetLanguage: filters.targetLanguage === "all" ? undefined : filters.targetLanguage,
+            itemIdOrPath: trimmedItem ? trimmedItem : undefined,
+            itemIncludeSubitems: trimmedItem && filters.itemIncludeSubitems ? true : undefined,
+        };
+    }, [filters, isLimitedPreviewUser, currentUserName]);
+    const loadRecentBatches = useCallback(async (offset, append, filtersToUse) => {
+        const myRequestId = ++requestIdRef.current;
+        if (offset === 0) {
+            setIsLoading(true);
+        }
+        else {
+            setIsLoadingMore(true);
+        }
+        try {
+            const limit = 100;
+            const res = await listBatches(limit, offset, filtersToUse);
+            // Drop stale responses — a newer request has already superseded this one.
+            if (myRequestId !== requestIdRef.current)
+                return;
+            const maybeData = res?.data ?? res;
+            const newBatches = Array.isArray(maybeData) ? maybeData : [];
+            if (append) {
+                setBatches(prev => {
+                    const map = new Map();
+                    for (const b of prev)
+                        map.set(b.id, b);
+                    for (const b of newBatches)
+                        map.set(b.id, b);
+                    return Array.from(map.values());
+                });
+            }
+            else {
+                const map = new Map();
+                for (const b of newBatches)
+                    map.set(b.id, b);
+                setBatches(Array.from(map.values()));
+            }
+            setHasMore(newBatches.length === limit);
+            setCurrentOffset(offset + limit);
+        }
+        catch (error) {
+            if (myRequestId !== requestIdRef.current)
+                return;
+            console.error("Failed to load batches:", error);
+        }
+        finally {
+            if (myRequestId === requestIdRef.current) {
+                setIsLoading(false);
+                setIsLoadingMore(false);
+            }
+        }
+    }, []);
+    const debouncedReload = useDebouncedCallback(() => loadRecentBatches(0, false, effectiveFilters), 800);
+    const debouncedSetItemFilter = useDebouncedCallback((value) => setFilters((prev) => ({ ...prev, itemIdOrPath: value })), 400);
+    const loadMore = () => {
+        if (!isLoadingMore && hasMore) {
+            loadRecentBatches(currentOffset, true, effectiveFilters);
+        }
+    };
+    // Load providers
+    useEffect(() => {
+        const loadProviders = async () => {
+            try {
+                const res = await getTranslationProviders();
+                const providerData = (res?.data ?? res ?? []);
+                setProviders(providerData);
+            }
+            catch (error) {
+                console.error("Failed to load translation providers:", error);
+            }
+        };
+        loadProviders();
+    }, []);
+    // Load Sitecore languages once for the Target Language dropdown
+    useEffect(() => {
+        const loadLanguages = async () => {
+            try {
+                const res = await getLanguages();
+                const langs = (res?.data ?? res ?? []);
+                setSitecoreLanguages(Array.isArray(langs) ? langs : []);
+            }
+            catch (error) {
+                console.error("Failed to load Sitecore languages:", error);
+            }
+        };
+        loadLanguages();
+    }, []);
+    // Reload when filters change (resets pagination)
+    useEffect(() => {
+        loadRecentBatches(0, false, effectiveFilters);
+    }, [loadRecentBatches, effectiveFilters]);
+    // Seed the cache with the current user's full name so rows authored by us
+    // resolve immediately, without waiting on a searchUsers round-trip.
+    useEffect(() => {
+        const me = editContext?.user;
+        if (!me?.name)
+            return;
+        const fullName = me.fullName?.trim();
+        if (!fullName)
+            return;
+        setUserDisplayNames((prev) => {
+            if (prev[me.name] === fullName)
+                return prev;
+            return { ...prev, [me.name]: fullName };
+        });
+    }, [editContext?.user]);
+    // Resolve `initiatedByUser` to a full display name for every batch we haven't
+    // looked up yet. Runs once per unique username.
+    useEffect(() => {
+        const unresolved = new Set();
+        for (const b of batches) {
+            const name = b.initiatedByUser?.trim();
+            if (!name)
+                continue;
+            if (userDisplayNames[name] !== undefined)
+                continue;
+            unresolved.add(name);
+        }
+        if (unresolved.size === 0)
+            return;
+        let cancelled = false;
+        (async () => {
+            const updates = {};
+            await Promise.all(Array.from(unresolved).map(async (userName) => {
+                try {
+                    const results = await searchBackendUsers(userName, 5);
+                    const exact = results.find((r) => r.userName?.toLowerCase() === userName.toLowerCase()) ??
+                        results[0];
+                    updates[userName] = exact?.displayName?.trim() || userName;
+                }
+                catch {
+                    updates[userName] = userName;
+                }
+            }));
+            if (cancelled || Object.keys(updates).length === 0)
+                return;
+            setUserDisplayNames((prev) => ({ ...prev, ...updates }));
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [batches, userDisplayNames]);
+    // Keep refs to the latest reload + expansion state so the socket listener
+    // can be registered once and survive editContext identity changes.
+    // Without this, a context recreation (triggered e.g. by EditorShell's
+    // requestRefresh("immediate") on batch-completed) tears down the listener
+    // and cancels the pending debouncedReload before it fires.
+    const debouncedReloadRef = useRef(debouncedReload);
+    useEffect(() => {
+        debouncedReloadRef.current = debouncedReload;
+    }, [debouncedReload]);
+    const expandedBatchIdRef = useRef(expandedBatchId);
+    useEffect(() => {
+        expandedBatchIdRef.current = expandedBatchId;
+    }, [expandedBatchId]);
+    const loadBatchJobsRef = useRef(null);
+    // Listen for batch-related events to refresh the list
+    useEffect(() => {
+        const removeSocketMessageListener = editContext?.addSocketMessageListener((message) => {
+            const batchIdFromPayload = normalizeGuid(message?.payload?.batchId ?? message?.payload?.BatchId);
+            if (message.type === "batch-completed" ||
+                ((message.type === "translation-started" ||
+                    message.type === "translation-finished" ||
+                    message.type === "translation-error" ||
+                    message.type === "translation-aborted") &&
+                    batchIdFromPayload)) {
+                debouncedReloadRef.current();
+                // If the impacted batch is currently expanded, refresh its per-job
+                // list too — otherwise the language chips keep their stale spinner.
+                if (batchIdFromPayload &&
+                    expandedBatchIdRef.current === batchIdFromPayload) {
+                    void loadBatchJobsRef.current?.(batchIdFromPayload);
+                }
+            }
+        });
+        return () => {
+            if (removeSocketMessageListener) {
+                removeSocketMessageListener();
+            }
+            // Intentionally do NOT cancel the pending debouncedReload here —
+            // editContext can change identity between message arrival and the
+            // debounce expiry, and cancelling on re-subscription would drop the
+            // refresh that brings the UI to its final state.
+        };
+    }, [editContext]);
+    const searchTranslationUsers = useCallback((query, limit) => searchBackendUsers(query, limit), []);
+    // Languages available in the Target Language dropdown — sourced from Sitecore so
+    // the list is stable regardless of the current filter selection.
+    const languageOptions = useMemo(() => sitecoreLanguages
+        .map(l => l.languageCode || l.name)
+        .filter((code) => !!code)
+        .sort(), [sitecoreLanguages]);
+    // Group by date. Filtering happens server-side, so we operate on `batches` directly.
+    const groupedBatches = useMemo(() => {
+        if (batches.length === 0)
+            return [];
+        const dedupMap = new Map();
+        for (const b of batches)
+            dedupMap.set(b.id, b);
+        const sorted = Array.from(dedupMap.values()).sort((a, b) => new Date(b.startedAtUtc || b.createdAtUtc || b.lastUpdatedUtc || '').getTime() -
+            new Date(a.startedAtUtc || a.createdAtUtc || a.lastUpdatedUtc || '').getTime());
+        const list = sorted.map(b => ({
+            id: b.id,
+            timestamp: b.startedAtUtc || b.createdAtUtc || b.lastUpdatedUtc || new Date().toISOString(),
+            info: b,
+        }));
+        const now = new Date();
+        const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
+        const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);
+        const thisWeek = new Date(today.getTime() - 7 * 24 * 60 * 60 * 1000);
+        const dateGroups = [];
+        const todayBatches = [];
+        const yesterdayBatches = [];
+        const thisWeekBatches = [];
+        const olderBatches = [];
+        for (const b of list) {
+            const d = new Date(b.timestamp);
+            const day = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+            if (day.getTime() === today.getTime())
+                todayBatches.push(b);
+            else if (day.getTime() === yesterday.getTime())
+                yesterdayBatches.push(b);
+            else if (day >= thisWeek)
+                thisWeekBatches.push(b);
+            else
+                olderBatches.push(b);
+        }
+        if (todayBatches.length)
+            dateGroups.push({ label: "Today", batches: todayBatches });
+        if (yesterdayBatches.length)
+            dateGroups.push({ label: "Yesterday", batches: yesterdayBatches });
+        if (thisWeekBatches.length)
+            dateGroups.push({ label: "This Week", batches: thisWeekBatches });
+        if (olderBatches.length)
+            dateGroups.push({ label: "Older", batches: olderBatches });
+        return dateGroups;
+    }, [batches]);
+    const loadBatchJobs = useCallback(async (batchId) => {
+        setLoadingJobs(prev => {
+            const next = new Set(prev);
+            next.add(batchId);
+            return next;
+        });
+        try {
+            const res = await listBatchTranslationJobs(batchId);
+            const data = (res?.data ?? res ?? []);
+            setBatchJobs(prev => ({ ...prev, [batchId]: Array.isArray(data) ? data : [] }));
+        }
+        catch (error) {
+            console.error("Failed to load batch jobs:", error);
+        }
+        finally {
+            setLoadingJobs(prev => {
+                const next = new Set(prev);
+                next.delete(batchId);
+                return next;
+            });
+        }
+    }, []);
+    useEffect(() => {
+        loadBatchJobsRef.current = loadBatchJobs;
+    }, [loadBatchJobs]);
+    const toggleBatch = useCallback((batchId) => {
+        setExpandedBatchId(prev => {
+            const next = prev === batchId ? null : batchId;
+            if (next && !batchJobs[next]) {
+                void loadBatchJobs(next);
+            }
+            return next;
+        });
+        setExpandedItems(new Set());
+    }, [batchJobs, loadBatchJobs]);
+    const toggleItem = useCallback((key) => {
+        setExpandedItems(prev => {
+            const next = new Set(prev);
+            if (next.has(key))
+                next.delete(key);
+            else
+                next.add(key);
+            return next;
+        });
+    }, []);
+    const handleAbortBatch = useCallback((batchId) => {
+        editContext?.confirm({
+            header: "Abort Translation Batch",
+            message: "Abort all pending and in-progress jobs in this batch? This stops remaining translation work, but it does not roll back content that was already written.",
+            acceptLabel: "Abort",
+            showCancel: true,
+            accept: async () => {
+                setAbortingBatchIds(prev => new Set(prev).add(batchId));
+                try {
+                    const result = await abortBatch(batchId);
+                    if (result.type !== "success") {
+                        toast.error(result.details || result.summary || "Failed to abort translation batch.");
+                        return;
+                    }
+                    toast.success("Translation batch aborted.");
+                    await loadRecentBatches(0, false, effectiveFilters);
+                    if (expandedBatchId === batchId) {
+                        await loadBatchJobs(batchId);
+                    }
+                }
+                finally {
+                    setAbortingBatchIds(prev => {
+                        const next = new Set(prev);
+                        next.delete(batchId);
+                        return next;
+                    });
+                }
+            },
+        });
+    }, [editContext, effectiveFilters, expandedBatchId, loadBatchJobs, loadRecentBatches]);
+    const handleDeleteBatch = useCallback((batchId) => {
+        editContext?.confirm({
+            header: "Delete Translation History",
+            message: "Delete this translation batch from history? This removes only translation job records; it does not delete Sitecore items or translated content.",
+            acceptLabel: "Delete",
+            showCancel: true,
+            accept: async () => {
+                setDeletingBatchIds(prev => new Set(prev).add(batchId));
+                try {
+                    const result = await deleteBatch(batchId);
+                    if (result.type !== "success") {
+                        toast.error(result.details || result.summary || "Failed to delete translation batch.");
+                        return;
+                    }
+                    toast.success("Translation batch deleted.");
+                    setBatches(prev => prev.filter(batch => batch.id !== batchId));
+                    setBatchJobs(prev => {
+                        const next = { ...prev };
+                        delete next[batchId];
+                        return next;
+                    });
+                    setExpandedBatchId(prev => prev === batchId ? null : prev);
+                }
+                finally {
+                    setDeletingBatchIds(prev => {
+                        const next = new Set(prev);
+                        next.delete(batchId);
+                        return next;
+                    });
+                }
+            },
+        });
+    }, [editContext]);
+    const openItemInEditor = useCallback(async (itemId, language) => {
+        const normalized = (itemId ?? "").toString().toLowerCase();
+        editContext?.setShowAgentsWorkspaceEditor(true);
+        await editContext?.loadItem({ id: normalized, language, version: 0 });
+    }, [editContext]);
+    const totalBatches = groupedBatches.reduce((sum, group) => sum + group.batches.length, 0);
+    const isMobile = editContext?.isMobile ?? false;
+    const hasActiveFilters = filters.dateRange !== "last30days" ||
+        filters.status !== "all" ||
+        filters.user !== currentUserName ||
+        filters.provider !== "all" ||
+        filters.targetLanguage !== "all" ||
+        filters.itemIdOrPath.trim() !== "";
+    const filterLabelClass = "flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-[0.06em] text-(--color-gray-2)";
+    return (_jsxs("div", { className: "flex h-full flex-col min-h-0 bg-background", "data-testid": "translation-batches", children: [_jsx("div", { className: "shrink-0 px-4 pt-4 pb-3 md:px-6", children: _jsxs("div", { className: "flex flex-wrap items-end gap-x-3 gap-y-2", children: [_jsxs("div", { className: "flex min-w-[160px] flex-1 flex-col gap-1", children: [_jsxs("label", { className: filterLabelClass, children: [_jsx(CalendarIcon, { className: "h-3 w-3" }), "Date Range"] }), _jsx(Select, { className: "w-full bg-gray-5", options: DATE_RANGE_OPTIONS, value: filters.dateRange, onValueChange: (value) => setFilters((prev) => ({ ...prev, dateRange: value })), placeholder: "Select date range" })] }), _jsxs("div", { className: "flex min-w-[140px] flex-1 flex-col gap-1", children: [_jsxs("label", { className: filterLabelClass, children: [_jsx(StatusIcon, { className: "h-3 w-3" }), "Status"] }), _jsx(Select, { className: "w-full bg-gray-5", options: STATUS_OPTIONS, value: filters.status, onValueChange: (value) => setFilters((prev) => ({ ...prev, status: value })), placeholder: "Select status" })] }), _jsxs("div", { className: "flex min-w-[200px] flex-1 flex-col gap-1", children: [_jsxs("label", { className: filterLabelClass, children: [_jsx(UserFilterIcon, { className: "h-3 w-3" }), "User"] }), _jsx(UserPicker, { value: isLimitedPreviewUser
+                                        ? currentUserName
+                                        : filters.user === "all"
+                                            ? null
+                                            : filters.user, displayValue: isLimitedPreviewUser || filters.user === currentUserName
+                                        ? `${editContext?.user?.fullName?.trim() || currentUserName} (You)`
+                                        : undefined, onChange: (user) => setFilters((prev) => ({
+                                        ...prev,
+                                        user: user?.userName ?? "all",
+                                    })), disabled: isLimitedPreviewUser, placeholder: "All Users", buttonClassName: "h-[27px] w-full justify-start rounded-md border bg-gray-5 text-xs font-medium", allowClear: true, clearLabel: "All Users", searchUsers: searchTranslationUsers })] }), _jsxs("div", { className: "flex min-w-[160px] flex-1 flex-col gap-1", children: [_jsxs("label", { className: filterLabelClass, children: [_jsx(ProviderIcon, { className: "h-3 w-3" }), "Provider"] }), _jsx(Select, { className: "w-full bg-gray-5", options: [
+                                        { value: "all", label: "All Providers" },
+                                        ...providers.map((p) => ({
+                                            value: p.name,
+                                            label: p.displayName || p.name,
+                                        })),
+                                    ], value: filters.provider, onValueChange: (value) => setFilters((prev) => ({ ...prev, provider: value })), placeholder: "Select provider" })] }), _jsxs("div", { className: "flex min-w-[160px] flex-1 flex-col gap-1", children: [_jsxs("label", { className: filterLabelClass, children: [_jsx(GlobeIcon, { className: "h-3 w-3" }), "Target Language"] }), _jsx(Select, { className: "w-full bg-gray-5", options: [
+                                        { value: "all", label: "All Languages" },
+                                        ...languageOptions.map((lang) => ({
+                                            value: lang,
+                                            label: lang,
+                                        })),
+                                    ], value: filters.targetLanguage, onValueChange: (value) => setFilters((prev) => ({ ...prev, targetLanguage: value })), placeholder: "Select language" })] }), _jsxs("div", { className: "flex min-w-[200px] flex-1 flex-col gap-1", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("label", { className: filterLabelClass, children: [_jsx(ItemIcon, { className: "h-3 w-3" }), "Item ID / Path"] }), _jsxs("label", { className: "flex items-center gap-1 text-[10px] text-(--color-gray-2) cursor-pointer select-none", children: [_jsx("input", { type: "checkbox", checked: filters.itemIncludeSubitems, onChange: (e) => setFilters((prev) => ({ ...prev, itemIncludeSubitems: e.target.checked })), className: "h-3 w-3 accent-(--color-theme-secondary) cursor-pointer" }), "Include subitems"] })] }), _jsxs("div", { className: "relative", children: [_jsx(Input, { value: itemIdOrPathInput, onChange: (e) => {
+                                                const next = e.target.value;
+                                                setItemIdOrPathInput(next);
+                                                debouncedSetItemFilter(next);
+                                            }, placeholder: "GUID or /sitecore/content/\u2026", className: "h-[27px] w-full bg-gray-5 text-xs pr-14" }), _jsxs("div", { className: "absolute right-1.5 top-1/2 -translate-y-1/2 flex items-center gap-1", children: [itemIdOrPathInput && (_jsx("button", { type: "button", onClick: () => {
+                                                        setItemIdOrPathInput("");
+                                                        debouncedSetItemFilter.cancel();
+                                                        setFilters((prev) => ({ ...prev, itemIdOrPath: "", itemIncludeSubitems: false }));
+                                                    }, className: "text-gray-2 hover:text-(--color-dark) cursor-pointer", "aria-label": "Clear", children: _jsx(XIcon, { className: "h-3.5 w-3.5" }) })), _jsxs(Popover, { open: itemPickerOpen, onOpenChange: setItemPickerOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "text-gray-2 hover:text-(--color-dark) cursor-pointer", "aria-label": "Browse content tree", title: "Browse content tree", children: _jsx(FolderTreeIcon, { className: "h-3.5 w-3.5" }) }) }), _jsxs(PopoverContent, { align: "end", sideOffset: 6, className: "w-[28rem] max-w-[calc(100vw-2rem)] p-0", children: [_jsx("div", { className: "flex items-center justify-between gap-2 border-b border-gray-3 px-3 py-2 text-[11px] text-gray-2", children: _jsx("span", { children: "Pick item to filter by" }) }), _jsx("div", { className: "max-h-80 overflow-auto p-2", children: _jsx(ContentTree, { language: "en", selectionMode: "single", rootItemIds: ["0de95ae4-41ab-4d01-9eb0-67441b7c2450"], onSelectionChange: (items) => {
+                                                                            const picked = items?.[0];
+                                                                            if (!picked)
+                                                                                return;
+                                                                            const applyValue = (value) => {
+                                                                                setItemIdOrPathInput(value);
+                                                                                debouncedSetItemFilter.cancel();
+                                                                                setFilters((prev) => ({ ...prev, itemIdOrPath: value }));
+                                                                                setItemPickerOpen(false);
+                                                                            };
+                                                                            if (picked.path) {
+                                                                                applyValue(picked.path);
+                                                                                return;
+                                                                            }
+                                                                            // Fall back: resolve the item's path via a stub fetch
+                                                                            // so the input shows a human-readable path instead of a GUID.
+                                                                            fetchItemStubs([{ id: picked.id, language: "en", version: 1 }])
+                                                                                .then((stubs) => {
+                                                                                const stubPath = stubs?.[0]?.path;
+                                                                                applyValue(stubPath || picked.id);
+                                                                            })
+                                                                                .catch(() => applyValue(picked.id));
+                                                                        } }) })] })] })] })] })] })] }) }), _jsx("div", { className: "flex-1 overflow-auto p-4 md:p-6 min-h-0", children: isLoading && batches.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 recent translations..."] }) })) : groupedBatches.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-3" }), _jsx("p", { className: "font-medium text-(--color-gray-1)", children: "No translations found" }), _jsx("p", { className: "text-sm mt-1", children: (() => {
+                                    const hasActiveFilters = filters.dateRange !== "last30days" ||
+                                        filters.status !== "all" ||
+                                        filters.user !== currentUserName ||
+                                        filters.provider !== "all" ||
+                                        filters.targetLanguage !== "all" ||
+                                        filters.itemIdOrPath.trim() !== "";
+                                    return hasActiveFilters
+                                        ? "Try adjusting your filters or start a translation to see it appear here"
+                                        : "Start a translation to see it appear here";
+                                })() })] }) })) : (_jsxs("div", { className: "space-y-10", children: [groupedBatches.map((dateGroup) => (_jsxs("div", { children: [_jsxs("div", { className: "flex items-baseline gap-2 mb-2", children: [_jsx("h2", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-(--color-gray-2)", children: dateGroup.label }), _jsx("span", { className: "flex-1 ml-2 border-t border-gray-3" })] }), _jsx("div", { className: "divide-y divide-gray-3/70", children: dateGroup.batches.map((b) => {
+                                        const batchDate = new Date(b.timestamp);
+                                        const now = new Date();
+                                        const isToday = batchDate.toDateString() === now.toDateString();
+                                        const timeDisplay = isToday
+                                            ? batchDate.toLocaleTimeString()
+                                            : batchDate.toLocaleDateString() + " " + batchDate.toLocaleTimeString();
+                                        const info = b.info;
+                                        const totalJobs = info?.expectedJobs ?? 0;
+                                        const itemsCount = typeof info?.itemsCount === 'number' ? info.itemsCount : undefined;
+                                        const languagesCsv = info?.languages;
+                                        const languages = languagesCsv ? languagesCsv.split(',') : [];
+                                        const completedJobs = info?.completedJobs ?? 0;
+                                        const errorJobs = info?.errorJobs ?? 0;
+                                        const anyError = errorJobs > 0;
+                                        const anyInProgress = isActiveBatchStatus(info?.status);
+                                        const anyAborted = info?.status === "Aborted";
+                                        const progressPct = totalJobs > 0 ? Math.min(100, Math.round((completedJobs / totalJobs) * 100)) : 0;
+                                        const showProgress = totalJobs > 0 && (anyInProgress || anyError);
+                                        const statusDotClass = anyError
+                                            ? "bg-red-400"
+                                            : anyInProgress
+                                                ? "bg-(--color-theme-secondary)"
+                                                : anyAborted
+                                                    ? "bg-amber-400"
+                                                    : "bg-emerald-400/70";
+                                        const metaParts = [];
+                                        metaParts.push(_jsxs("span", { className: "text-(--color-gray-1)", children: [totalJobs, " translation", totalJobs !== 1 ? 's' : ''] }, "trans"));
+                                        if (typeof itemsCount === 'number') {
+                                            metaParts.push(_jsxs("span", { children: [itemsCount, " item", itemsCount !== 1 ? 's' : ''] }, "items"));
+                                        }
+                                        if (languages.length > 0) {
+                                            metaParts.push(_jsxs("span", { title: languages.join(", "), children: [languages.length, " language", languages.length !== 1 ? 's' : ''] }, "langs"));
+                                        }
+                                        if (info?.provider) {
+                                            metaParts.push(_jsx("span", { children: info.provider }, "prov"));
+                                        }
+                                        if (info?.totalCost != null) {
+                                            metaParts.push(_jsxs("span", { children: ["Cost: ", _jsx("span", { className: "font-medium text-(--color-gray-1)", children: formatUsdCost(info.totalCost) })] }, "cost"));
+                                        }
+                                        if (info?.initiatedByUser) {
+                                            const resolved = userDisplayNames[info.initiatedByUser];
+                                            metaParts.push(_jsx("span", { title: info.initiatedByUser, children: resolved || info.initiatedByUser }, "user"));
+                                        }
+                                        const isExpanded = expandedBatchId === b.id;
+                                        const jobs = batchJobs[b.id];
+                                        const isLoadingThis = loadingJobs.has(b.id);
+                                        const canAbort = isActiveBatchStatus(info?.status);
+                                        const canDelete = isTerminalBatchStatus(info?.status);
+                                        const isAborting = abortingBatchIds.has(b.id);
+                                        const isDeleting = deletingBatchIds.has(b.id);
+                                        // Stable test-id status used by Playwright assertions.
+                                        // Matches the visual status dot/spinner logic above.
+                                        const testStatus = anyError
+                                            ? "error"
+                                            : anyInProgress
+                                                ? "in-progress"
+                                                : anyAborted
+                                                    ? "aborted"
+                                                    : "completed";
+                                        return (_jsxs("div", { "data-testid": `batch-row-${b.id}`, "data-batch-status": testStatus, children: [_jsx("div", { role: "button", tabIndex: 0, className: "group w-full text-left px-3 md:px-4 py-3 hover:bg-gray-5 transition-colors cursor-pointer", onClick: () => toggleBatch(b.id), onKeyDown: (e) => {
+                                                        if (e.key === "Enter" || e.key === " ") {
+                                                            e.preventDefault();
+                                                            toggleBatch(b.id);
+                                                        }
+                                                    }, children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2.5", children: [anyInProgress ? (_jsx(LoaderIcon, { className: "h-3 w-3 shrink-0 animate-spin text-theme-secondary" })) : (_jsx("span", { className: `h-1.5 w-1.5 shrink-0 rounded-full ${statusDotClass}`, "aria-hidden": "true" })), _jsx("span", { className: "text-(--color-dark-lighter) truncate", title: timeDisplay, children: (() => {
+                                                                                    let parsedName;
+                                                                                    if (info?.metadata) {
+                                                                                        try {
+                                                                                            const m = typeof info.metadata === "string"
+                                                                                                ? JSON.parse(info.metadata)
+                                                                                                : info.metadata;
+                                                                                            const candidate = m?.name;
+                                                                                            if (typeof candidate === "string" && candidate.trim()) {
+                                                                                                parsedName = candidate.trim();
+                                                                                            }
+                                                                                        }
+                                                                                        catch {
+                                                                                            // Metadata isn't JSON — fall through to timestamp.
+                                                                                        }
+                                                                                    }
+                                                                                    return parsedName ?? `Translation Batch · ${timeDisplay}`;
+                                                                                })() }), showProgress && (_jsxs("span", { className: `inline-flex items-center gap-1 text-[11px] tabular-nums ${anyError ? 'text-red-600' : 'text-theme-secondary'}`, "data-testid": `batch-progress-${b.id}`, children: [completedJobs, "/", totalJobs, anyError && _jsxs("span", { className: "text-red-600", children: ["\u00B7 ", errorJobs, " error", errorJobs !== 1 ? 's' : ''] })] }))] }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[12px] text-gray-2 pl-4", children: [metaParts.map((part, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx("span", { className: "text-gray-3", children: "\u00B7" }), part] }, i))), info?.lastUpdatedUtc && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-gray-3", children: "\u00B7" }), _jsx("span", { children: new Date(info.lastUpdatedUtc).toLocaleString() })] }))] })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [canAbort && (_jsx(SimpleIconButton, { onClick: (event) => {
+                                                                            event.stopPropagation();
+                                                                            handleAbortBatch(b.id);
+                                                                        }, icon: _jsx(AbortIcon, { className: `h-3.5 w-3.5 ${isAborting ? "animate-spin" : ""}`, strokeWidth: 1.5 }), label: "Abort translation batch", disabled: isAborting || isDeleting, className: "p-0! text-amber-600 hover:text-amber-700" })), canDelete && (_jsx(SimpleIconButton, { onClick: (event) => {
+                                                                            event.stopPropagation();
+                                                                            handleDeleteBatch(b.id);
+                                                                        }, icon: _jsx(TrashIcon, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }), label: "Delete translation history", disabled: isDeleting || isAborting, className: "p-0! text-red-500 hover:text-red-600" })), _jsx("div", { className: `text-gray-3 transition-transform ${isExpanded ? 'rotate-180' : ''} group-hover:text-(--color-gray-2)`, children: _jsx(ChevronDownIcon, { className: "h-4 w-4" }) })] })] }) }), isExpanded && (_jsxs(_Fragment, { children: [_jsx(CustomPromptPanel, { prompts: parseCustomPrompts(info?.metadata) }), _jsx(BatchItemList, { jobs: jobs, isLoading: isLoadingThis, expandedItems: expandedItems, languages: sitecoreLanguages, itemFilter: filters.itemIdOrPath.trim(), itemIncludeSubitems: filters.itemIncludeSubitems, statusFilter: filters.status, batchIsTerminal: isTerminalBatchStatus(info?.status), batchStartedAtUtc: info?.startedAtUtc ?? info?.createdAtUtc, onToggleItem: toggleItem, onOpenItem: openItemInEditor })] }))] }, b.id));
+                                    }) })] }, dateGroup.label))), hasMore && (_jsx("div", { className: "flex justify-center pt-6", children: _jsx(Button, { variant: "outline", size: "sm", onClick: loadMore, disabled: isLoadingMore, children: isLoadingMore ? (_jsxs(_Fragment, { children: [_jsx(LoaderIcon, { className: "h-4 w-4 animate-spin text-theme-secondary" }), "Loading more..."] })) : (_jsxs(_Fragment, { children: [_jsx(ChevronDownIcon, { className: "h-4 w-4" }), "Load More Batches"] })) }) }))] })) })] }));
+}
+function isLikelyGuid(value) {
+    return /^[{(]?[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}[)}]?$/i.test(value.trim());
+}
+function parseItemName(metadata, fallback) {
+    if (!metadata)
+        return fallback;
+    try {
+        const parsed = typeof metadata === "string" ? JSON.parse(metadata) : metadata;
+        const name = parsed?.name ?? parsed?.itemName ?? parsed?.displayName;
+        if (typeof name === "string" && name.trim())
+            return name.trim();
+    }
+    catch {
+        // not JSON
+    }
+    return fallback;
+}
+function parseCustomPrompts(metadata) {
+    if (!metadata)
+        return [];
+    try {
+        const parsed = typeof metadata === "string" ? JSON.parse(metadata) : metadata;
+        const scd = parsed?.serviceCustomData;
+        if (!scd || typeof scd !== "object")
+            return [];
+        const out = [];
+        for (const [provider, value] of Object.entries(scd)) {
+            const v = value;
+            const prompt = (v?.customPrompt || "").trim();
+            if (v?.enableCustomPrompt && prompt) {
+                out.push({ provider, prompt });
+            }
+        }
+        return out;
+    }
+    catch {
+        return [];
+    }
+}
+function parseTranslationStatistics(metadata) {
+    if (!metadata)
+        return null;
+    try {
+        const parsed = typeof metadata === "string" ? JSON.parse(metadata) : metadata;
+        const stats = parsed?.statistics ?? parsed?.translationStats;
+        if (!stats || typeof stats !== "object")
+            return null;
+        const fieldCount = Number(stats.fieldCount);
+        const nonEmptyFieldCount = Number(stats.nonEmptyFieldCount ?? stats.translatedFieldCount ?? fieldCount);
+        const emptyFieldCount = Number(stats.emptyFieldCount ?? Math.max(0, fieldCount - nonEmptyFieldCount));
+        const sourceCharacterCount = Number(stats.sourceCharacterCount ?? stats.textCharacterCount ?? stats.characterCount);
+        if (!Number.isFinite(fieldCount) ||
+            !Number.isFinite(nonEmptyFieldCount) ||
+            !Number.isFinite(emptyFieldCount) ||
+            !Number.isFinite(sourceCharacterCount)) {
+            return null;
+        }
+        return {
+            fieldCount,
+            nonEmptyFieldCount,
+            emptyFieldCount,
+            sourceCharacterCount,
+        };
+    }
+    catch {
+        return null;
+    }
+}
+function formatCount(value) {
+    return new Intl.NumberFormat().format(value);
+}
+function formatUsdCost(value) {
+    return new Intl.NumberFormat("en-US", {
+        style: "currency",
+        currency: "USD",
+        minimumFractionDigits: value > 0 && value < 0.01 ? 4 : 2,
+        maximumFractionDigits: value > 0 && value < 0.01 ? 6 : 2,
+    }).format(value);
+}
+function itemStatusDot(jobs) {
+    const hasError = jobs.some(j => j.status === "Error");
+    const hasInProgress = jobs.some(j => j.status === "In Progress");
+    const hasPending = jobs.some(j => j.status === "Pending");
+    const hasAborted = jobs.some(j => j.status === "Aborted");
+    if (hasError)
+        return { cls: "bg-red-400", label: "Has errors" };
+    if (hasInProgress)
+        return { cls: "bg-(--color-theme-secondary)", label: "In progress" };
+    if (hasPending)
+        return { cls: "bg-gray-3", label: "Queued" };
+    if (hasAborted)
+        return { cls: "bg-amber-400", label: "Aborted" };
+    return { cls: "bg-emerald-400/70", label: "Completed" };
+}
+function CustomPromptPanel({ prompts }) {
+    const [openProvider, setOpenProvider] = React.useState(null);
+    const [copiedProvider, setCopiedProvider] = React.useState(null);
+    const copyTimerRef = React.useRef(null);
+    React.useEffect(() => {
+        return () => {
+            if (copyTimerRef.current)
+                clearTimeout(copyTimerRef.current);
+        };
+    }, []);
+    if (prompts.length === 0)
+        return null;
+    const handleCopy = async (provider, prompt) => {
+        try {
+            await navigator.clipboard.writeText(prompt);
+            setCopiedProvider(provider);
+            if (copyTimerRef.current)
+                clearTimeout(copyTimerRef.current);
+            copyTimerRef.current = setTimeout(() => setCopiedProvider(null), 1500);
+        }
+        catch {
+            toast.error("Failed to copy prompt to clipboard");
+        }
+    };
+    return (_jsx("div", { className: "bg-gray-5/60 border-t border-gray-3/50", children: prompts.map((p) => {
+            const isOpen = openProvider === p.provider;
+            const justCopied = copiedProvider === p.provider;
+            return (_jsxs("div", { children: [_jsxs("div", { role: "button", tabIndex: 0, style: { paddingLeft: "2rem" }, className: "group flex items-center gap-2 pr-3 md:pr-4 py-2 text-[12px] text-gray-2 hover:bg-gray-5 transition-colors cursor-pointer", onClick: () => setOpenProvider(isOpen ? null : p.provider), onKeyDown: (e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                                e.preventDefault();
+                                setOpenProvider(isOpen ? null : p.provider);
+                            }
+                        }, children: [_jsx(SparklesIcon, { className: "h-3 w-3 shrink-0 text-(--color-theme-secondary)", strokeWidth: 1.75 }), _jsx("span", { className: "text-(--color-dark-lighter)", children: "Custom prompt" }), _jsx("span", { className: "text-gray-3", children: "\u00B7" }), _jsx("span", { children: p.provider }), _jsxs("span", { className: "ml-auto flex items-center gap-2", children: [isOpen && (_jsx(SimpleIconButton, { onClick: (event) => {
+                                            event.stopPropagation();
+                                            void handleCopy(p.provider, p.prompt);
+                                        }, icon: justCopied ? (_jsx(CheckIcon, { className: "h-3.5 w-3.5", strokeWidth: 1.5 })) : (_jsx(CopyIcon, { className: "h-3.5 w-3.5", strokeWidth: 1.5 })), label: justCopied ? "Copied" : "Copy prompt", className: "p-0! text-gray-2 hover:text-(--color-dark-lighter)" })), _jsx(ChevronDownIcon, { className: `h-3.5 w-3.5 text-gray-3 transition-transform group-hover:text-(--color-gray-2) ${isOpen ? "rotate-180" : ""}` })] })] }), isOpen && (_jsx("div", { style: { paddingLeft: "2.5rem" }, className: "pr-3 md:pr-4 pb-3", children: _jsx("pre", { className: "max-h-64 overflow-y-auto whitespace-pre-wrap break-words rounded border border-gray-3/50 bg-white p-2 font-mono text-[12px] text-(--color-dark-lighter)", children: p.prompt }) }))] }, p.provider));
+        }) }));
+}
+function BatchItemList({ jobs, isLoading, expandedItems, languages, itemFilter, itemIncludeSubitems, statusFilter, batchIsTerminal, batchStartedAtUtc, onToggleItem, onOpenItem }) {
+    const languageMap = React.useMemo(() => {
+        const map = new Map();
+        for (const l of languages) {
+            const code = (l.languageCode || l.name || "").toLowerCase();
+            if (code)
+                map.set(code, l);
+        }
+        return map;
+    }, [languages]);
+    // When the batch is effectively terminal, any job still reported as
+    // active in the DB is stale (worker died / queue cleared). Override its
+    // display status to "Aborted" so chips don't spin forever.
+    const effectiveJobs = React.useMemo(() => {
+        if (!jobs)
+            return jobs;
+        if (!batchIsTerminal)
+            return jobs;
+        return jobs.map((j) => {
+            if (j.status === "In Progress" || j.status === "Pending") {
+                return { ...j, status: "Aborted" };
+            }
+            return j;
+        });
+    }, [jobs, batchIsTerminal]);
+    const filteredJobs = React.useMemo(() => {
+        if (!effectiveJobs)
+            return effectiveJobs;
+        const filter = itemFilter.trim();
+        if (!filter)
+            return effectiveJobs;
+        // When subitems is enabled and the filter is a GUID, derive the root path
+        // from any job in this batch that matches the GUID — then fall through to
+        // prefix-matching on path. If no such job is in the batch we keep only
+        // the exact id match (best-effort: descendants without their root in the
+        // same batch can't be inferred here).
+        let pathPrefix = null;
+        if (isLikelyGuid(filter)) {
+            const normalized = normalizeGuid(filter);
+            if (itemIncludeSubitems) {
+                const rootJob = effectiveJobs.find(j => normalizeGuid((j.itemId || "").toString()) === normalized);
+                pathPrefix = rootJob?.itemPath ? rootJob.itemPath.toLowerCase() : null;
+            }
+            if (!pathPrefix) {
+                return effectiveJobs.filter(j => normalizeGuid((j.itemId || "").toString()) === normalized);
+            }
+        }
+        else if (filter.startsWith("/")) {
+            pathPrefix = filter.toLowerCase();
+        }
+        else {
+            return effectiveJobs;
+        }
+        if (itemIncludeSubitems) {
+            const prefix = pathPrefix;
+            const prefixSlash = prefix.endsWith("/") ? prefix : prefix + "/";
+            return effectiveJobs.filter(j => {
+                const p = (j.itemPath || "").toLowerCase();
+                return p === prefix || p.startsWith(prefixSlash);
+            });
+        }
+        return effectiveJobs.filter(j => (j.itemPath || "").toLowerCase() === pathPrefix);
+    }, [effectiveJobs, itemFilter, itemIncludeSubitems]);
+    // Keep all jobs of items that have at least one job matching the selected status —
+    // this way the per-item language overview stays intact even when filtering.
+    const statusFilteredJobs = React.useMemo(() => {
+        if (!filteredJobs)
+            return filteredJobs;
+        if (statusFilter === "all")
+            return filteredJobs;
+        const targetDbStatus = STATUS_FILTER_TO_DB[statusFilter];
+        const matchingItemIds = new Set();
+        for (const j of filteredJobs) {
+            if (j.status === targetDbStatus) {
+                matchingItemIds.add((j.itemId || "").toString().toLowerCase());
+            }
+        }
+        if (matchingItemIds.size === 0)
+            return [];
+        return filteredJobs.filter(j => matchingItemIds.has((j.itemId || "").toString().toLowerCase()));
+    }, [filteredJobs, statusFilter]);
+    if (isLoading && !jobs) {
+        return (_jsxs("div", { className: "px-3 md:px-4 py-4 pl-8 text-[12px] text-gray-2", children: [_jsx(LoaderIcon, { className: "inline h-3.5 w-3.5 mr-1.5 animate-spin text-theme-secondary" }), "Loading items\u2026"] }));
+    }
+    if (!statusFilteredJobs || statusFilteredJobs.length === 0) {
+        const hasItemFilter = itemFilter.trim() !== "";
+        const hasStatusFilter = statusFilter !== "all";
+        return (_jsx("div", { className: "px-3 md:px-4 py-3 pl-8 text-[12px] text-gray-2", children: hasItemFilter || hasStatusFilter
+                ? "No items match the current filter."
+                : "No items in this batch." }));
+    }
+    const byItem = new Map();
+    for (const job of statusFilteredJobs) {
+        const key = (job.itemId ?? "").toString().toLowerCase();
+        if (!byItem.has(key))
+            byItem.set(key, []);
+        byItem.get(key).push(job);
+    }
+    return (_jsx("div", { className: "bg-gray-5/60 divide-y divide-gray-3/50 border-t border-gray-3/50", children: Array.from(byItem.entries()).map(([itemId, itemJobs]) => {
+            const isItemExpanded = expandedItems.has(itemId);
+            const itemAnyInProgress = itemJobs.some(j => j.status === "In Progress");
+            const itemAnyPending = itemJobs.some(j => j.status === "Pending");
+            const itemIsQueued = !itemAnyInProgress && itemAnyPending;
+            const status = itemStatusDot(itemJobs);
+            const firstJob = itemJobs[0];
+            const itemPath = firstJob?.itemPath ?? null;
+            const serverName = firstJob?.itemName ?? null;
+            const metadataName = parseItemName(firstJob?.metadata, "");
+            const displayName = metadataName || serverName || itemId;
+            const langs = itemJobs.map(j => j.targetLanguage).filter(Boolean);
+            const uniqueLangs = Array.from(new Set(langs));
+            const titleAttr = `${itemPath ?? ""}\n${itemId}`.trim();
+            return (_jsxs("div", { children: [_jsx("div", { role: "button", tabIndex: 0, style: { paddingLeft: "2.5rem" }, className: "group w-full pr-3 md:pr-4 py-2 hover:bg-gray-5 transition-colors cursor-pointer text-left", onClick: () => onToggleItem(itemId), onKeyDown: (e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                                e.preventDefault();
+                                onToggleItem(itemId);
+                            }
+                        }, children: _jsxs("div", { className: "flex items-start gap-2.5 min-w-0", children: [_jsx("span", { className: "mt-1 shrink-0", children: itemAnyInProgress ? (_jsx(LoaderIcon, { className: "h-3 w-3 animate-spin text-theme-secondary" })) : itemIsQueued ? (_jsx(QueuedIcon, { className: "h-3 w-3 text-gray-2", strokeWidth: 1.75, "aria-label": "Queued" })) : (_jsx("span", { className: `block h-1.5 w-1.5 rounded-full ${status.cls}`, "aria-hidden": "true" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("span", { className: "text-[13px] text-(--color-dark-lighter) truncate", title: titleAttr, children: displayName }), _jsxs("span", { className: "text-[11px] text-gray-2 shrink-0", children: ["\u00B7 ", uniqueLangs.length, " language", uniqueLangs.length !== 1 ? 's' : ''] })] }), itemPath && (_jsx("div", { className: "text-[11px] text-gray-2 truncate font-mono", title: titleAttr, children: itemPath }))] }), _jsx("span", { className: "mt-1 shrink-0 text-gray-3 group-hover:text-(--color-gray-2)", children: _jsx(ChevronDownIcon, { className: `h-3.5 w-3.5 transition-transform ${isItemExpanded ? 'rotate-180' : ''}` }) })] }) }), isItemExpanded && (_jsx("div", { style: { paddingLeft: "4rem" }, className: "pr-3 md:pr-4 pb-3 pt-1 flex flex-wrap gap-1.5", children: itemJobs.map((job, idx) => {
+                            const lang = languageMap.get((job.targetLanguage || "").toLowerCase());
+                            return (_jsx(LanguageJobChip, { job: job, language: lang, batchStartedAtUtc: batchStartedAtUtc, onOpen: () => onOpenItem(job.itemId, job.targetLanguage) }, `${job.id ?? idx}-${job.targetLanguage}`));
+                        }) }))] }, itemId));
+        }) }));
+}
+function LanguageJobChip({ job, language, batchStartedAtUtc, onOpen }) {
+    const [open, setOpen] = React.useState(false);
+    const jobStatus = job.status;
+    const jobInProgress = jobStatus === "In Progress";
+    const jobPending = jobStatus === "Pending";
+    const jobError = jobStatus === "Error";
+    const jobAborted = jobStatus === "Aborted";
+    const langName = language?.name || job.targetLanguage;
+    const chipCls = jobError
+        ? "border-red-200 bg-red-50 text-red-700 hover:bg-red-100"
+        : jobAborted
+            ? "border-amber-200 bg-amber-50 text-amber-700 hover:bg-amber-100"
+            : jobInProgress
+                ? "border-(--color-theme-secondary)/30 bg-theme-secondary-light text-theme-secondary hover:brightness-95"
+                : jobPending
+                    ? "border-gray-3 bg-gray-5 text-gray-2 hover:bg-gray-4"
+                    : "border-gray-3 bg-background text-(--color-gray-1) hover:bg-gray-5";
+    const statusBadgeCls = jobError
+        ? "bg-red-50 text-red-700 ring-1 ring-inset ring-red-200"
+        : jobAborted
+            ? "bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-200"
+            : jobInProgress
+                ? "bg-theme-secondary-light text-theme-secondary ring-1 ring-inset ring-(--color-theme-secondary)/20"
+                : jobPending
+                    ? "bg-gray-4 text-gray-2 ring-1 ring-inset ring-gray-3"
+                    : "bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-200";
+    const timestamp = job.timestamp ? new Date(job.timestamp) : null;
+    const timestampValid = timestamp && !isNaN(timestamp.getTime());
+    const claimedAt = job.claimedAtUtc ? new Date(job.claimedAtUtc) : null;
+    const claimedAtValid = !!(claimedAt && !isNaN(claimedAt.getTime()));
+    const lastHeartbeat = job.lastHeartbeatUtc ? new Date(job.lastHeartbeatUtc) : null;
+    const lastHeartbeatValid = !!(lastHeartbeat && !isNaN(lastHeartbeat.getTime()));
+    // Fall back to the batch's start time when the job didn't record one of its
+    // own — older jobs (and provider-less paths) skip ClaimedAtUtc.
+    const batchStart = batchStartedAtUtc ? new Date(batchStartedAtUtc) : null;
+    const batchStartValid = !!(batchStart && !isNaN(batchStart.getTime()));
+    const startMs = claimedAtValid
+        ? claimedAt.getTime()
+        : batchStartValid
+            ? batchStart.getTime()
+            : null;
+    const durationApproximated = !claimedAtValid && batchStartValid;
+    // Duration of the run when we have both ends. For terminal statuses we use
+    // `timestamp` as the end. For active jobs we keep it ticking against now.
+    const durationMs = (() => {
+        if (startMs == null)
+            return null;
+        const end = jobInProgress || jobPending
+            ? Date.now()
+            : (timestampValid ? timestamp.getTime() : null);
+        if (end == null)
+            return null;
+        const ms = end - startMs;
+        return ms >= 0 ? ms : null;
+    })();
+    const formatDuration = (ms) => {
+        if (ms < 1000)
+            return "<1s";
+        const totalSec = Math.round(ms / 1000);
+        if (totalSec < 60)
+            return `${totalSec}s`;
+        const m = Math.floor(totalSec / 60);
+        const s = totalSec % 60;
+        if (m < 60)
+            return s === 0 ? `${m}m` : `${m}m ${s}s`;
+        const h = Math.floor(m / 60);
+        const rm = m % 60;
+        return rm === 0 ? `${h}h` : `${h}h ${rm}m`;
+    };
+    const attemptCount = typeof job.attemptCount === "number" ? job.attemptCount : 0;
+    const statistics = parseTranslationStatistics(job.metadata);
+    const fieldText = statistics
+        ? statistics.nonEmptyFieldCount === statistics.fieldCount
+            ? formatCount(statistics.fieldCount)
+            : `${formatCount(statistics.nonEmptyFieldCount)}/${formatCount(statistics.fieldCount)}`
+        : null;
+    const emptyFieldText = statistics && statistics.emptyFieldCount > 0
+        ? `${formatCount(statistics.emptyFieldCount)} empty`
+        : null;
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: `inline-flex items-center gap-1.5 rounded-md border px-2 py-0.5 text-[12px] transition-colors cursor-pointer ${chipCls}`, children: [language?.icon ? (_jsx("img", { src: language.icon, alt: langName, className: "h-3.5 shrink-0" })) : null, _jsx("span", { className: "font-mono tracking-tight", children: job.targetLanguage }), jobInProgress && (_jsx(LoaderIcon, { className: "h-3 w-3 shrink-0 animate-spin" })), jobPending && (_jsx(QueuedIcon, { className: "h-3 w-3 shrink-0", strokeWidth: 1.75, "aria-label": "Queued" })), jobError && (_jsx(AlertCircleIcon, { className: "h-3 w-3 shrink-0" })), !jobInProgress && !jobError && !jobPending && !jobAborted && (_jsx(CheckIcon, { className: "h-3 w-3 shrink-0 text-emerald-600" }))] }) }), _jsxs(PopoverContent, { align: "start", sideOffset: 6, className: "w-[22rem] max-w-[calc(100vw-2rem)] p-0", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-gray-3 px-3 py-2", children: [language?.icon ? (_jsx("img", { src: language.icon, alt: langName, className: "h-4 shrink-0" })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-[13px] font-medium text-(--color-dark-lighter) truncate", children: langName }), _jsxs("div", { className: "text-[11px] text-gray-2 font-mono truncate", children: [job.targetLanguage, job.sourceLanguage ? ` ← ${job.sourceLanguage}` : ""] })] }), _jsxs("span", { className: `inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide ${statusBadgeCls}`, children: [jobInProgress && _jsx(LoaderIcon, { className: "h-2.5 w-2.5 animate-spin" }), jobStatus || "Unknown"] })] }), _jsxs("dl", { className: "divide-y divide-gray-3/60", children: [claimedAtValid && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] uppercase tracking-wide text-gray-2", children: "Claimed" }), _jsx("dd", { className: "text-[12px] text-(--color-gray-1)", children: claimedAt.toLocaleString() })] })), timestampValid && (jobInProgress || jobPending) && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] uppercase tracking-wide text-gray-2", children: "Updated" }), _jsx("dd", { className: "text-[12px] text-(--color-gray-1)", children: timestamp.toLocaleString() })] })), durationMs != null && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] uppercase tracking-wide text-gray-2", children: jobInProgress || jobPending ? "Running" : "Duration" }), _jsxs("dd", { className: "text-[12px] tabular-nums text-(--color-gray-1)", title: durationApproximated ? "Approximate — measured from batch start" : undefined, children: [durationApproximated ? "~" : "", formatDuration(durationMs)] })] })), statistics && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] uppercase tracking-wide text-gray-2", children: "Fields" }), _jsxs("dd", { className: "text-[12px] tabular-nums text-(--color-gray-1)", children: [fieldText, emptyFieldText ? _jsxs("span", { className: "ml-1.5 text-gray-2", children: ["(", emptyFieldText, ")"] }) : null] })] })), statistics && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] uppercase tracking-wide text-gray-2", children: "Text" }), _jsxs("dd", { className: "text-[12px] tabular-nums text-(--color-gray-1)", children: [formatCount(statistics.sourceCharacterCount), " chars"] })] })), job.totalCost != null && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] uppercase tracking-wide text-gray-2", children: "Cost" }), _jsx("dd", { className: "text-[12px] tabular-nums text-(--color-gray-1)", children: formatUsdCost(job.totalCost) })] })), lastHeartbeatValid && (jobInProgress || jobPending) && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] uppercase tracking-wide text-gray-2", children: "Heartbeat" }), _jsx("dd", { className: "text-[12px] text-(--color-gray-1)", children: lastHeartbeat.toLocaleString() })] })), attemptCount > 1 && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] uppercase tracking-wide text-gray-2", children: "Attempts" }), _jsx("dd", { className: "text-[12px] tabular-nums text-(--color-gray-1)", children: attemptCount })] })), job.hash && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] uppercase tracking-wide text-gray-2", children: "Hash" }), _jsx("dd", { className: "text-[11px] font-mono text-(--color-gray-1) break-all", children: job.hash })] })), job.message && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] uppercase tracking-wide text-gray-2", children: jobError ? "Error" : jobAborted ? "Aborted" : "Message" }), _jsx("dd", { className: `text-[12px] break-words ${jobError ? "text-red-600" : jobAborted ? "text-amber-700" : "text-(--color-gray-1)"}`, children: job.message })] })), job.batchId && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] uppercase tracking-wide text-gray-2", children: "Batch" }), _jsx("dd", { className: "text-[11px] font-mono text-gray-2 break-all", children: job.batchId })] }))] }), _jsx("div", { className: "flex justify-end gap-2 border-t border-gray-3 px-3 py-2", children: _jsxs(Button, { size: "sm", variant: "default", onClick: (e) => {
+                                e.stopPropagation();
+                                void onOpen();
+                                setOpen(false);
+                            }, className: "gap-1.5", children: [_jsx(ExternalLinkIcon, { className: "h-3.5 w-3.5" }), "Open in editor"] }) })] })] }));
+}