@parhelia/localization 0.1.12902 → 0.1.12904

package/dist/translation-center/TranslationBatches.js

@@ -1,1160 +0,0 @@
-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, DeleteIcon, } from "@parhelia/core";
-import { listBatches, getTranslationProviders, listBatchTranslationJobs, retryBatchTranslation, 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, Hourglass, Copy, Sparkles, RotateCcw, } 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 QueuedIcon = (props) => React.createElement(Hourglass, props);
-const CopyIcon = (props) => React.createElement(Copy, props);
-const SparklesIcon = (props) => React.createElement(Sparkles, props);
-const RetryIcon = (props) => React.createElement(RotateCcw, 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 isRetriableJob(job) {
-    return job?.status === "Error";
-}
-function buildRetryJobRequest(job) {
-    if (!job.itemId || !job.sourceLanguage || !job.targetLanguage)
-        return null;
-    return {
-        sourceTranslationId: job.id,
-        itemId: job.itemId,
-        sourceLanguage: job.sourceLanguage,
-        targetLanguage: job.targetLanguage,
-        metadata: job.metadata,
-    };
-}
-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());
-    const [retryingKeys, setRetryingKeys] = 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 maybeProviders = res?.data ?? res;
-                setProviders(Array.isArray(maybeProviders)
-                    ? maybeProviders
-                    : []);
-            }
-            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 ??
-                []);
-            const jobs = Array.isArray(data) ? data : [];
-            setBatchJobs((prev) => ({ ...prev, [batchId]: jobs }));
-            return jobs;
-        }
-        catch (error) {
-            console.error("Failed to load batch jobs:", error);
-            return [];
-        }
-        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 handleRetryJobs = useCallback(async (batchId, provider, jobs, retryKey) => {
-        const sessionId = editContext?.sessionId;
-        if (!sessionId) {
-            toast.error("Cannot retry translations without an active session.");
-            return;
-        }
-        const retryJobs = jobs
-            .filter(isRetriableJob)
-            .map(buildRetryJobRequest)
-            .filter((job) => job != null);
-        if (retryJobs.length === 0) {
-            toast.error("No failed translations are available to retry.");
-            return;
-        }
-        setRetryingKeys((prev) => new Set(prev).add(retryKey));
-        try {
-            const result = await retryBatchTranslation({
-                sessionId,
-                sourceBatchId: batchId,
-                provider,
-                jobs: retryJobs,
-            });
-            if (result.type !== "success") {
-                toast.error(result.details ||
-                    result.summary ||
-                    "Failed to retry translations.");
-                return;
-            }
-            const payload = (result?.data ?? result);
-            const startedCount = payload.started?.length ?? 0;
-            const skippedCount = payload.skipped?.length ?? 0;
-            if (startedCount === 0) {
-                toast.error(skippedCount > 0
-                    ? "No translations were retried. They may already have been retried."
-                    : "No translations were retried.");
-            }
-            else {
-                toast.success(`Retry queued for ${startedCount} translation${startedCount !== 1 ? "s" : ""}.`);
-                if (skippedCount > 0) {
-                    toast.error(`${skippedCount} translation${skippedCount !== 1 ? "s were" : " was"} skipped.`);
-                }
-            }
-            await loadRecentBatches(0, false, effectiveFilters);
-            if (expandedBatchId === batchId || batchJobs[batchId]) {
-                await loadBatchJobs(batchId);
-            }
-        }
-        finally {
-            setRetryingKeys((prev) => {
-                const next = new Set(prev);
-                next.delete(retryKey);
-                return next;
-            });
-        }
-    }, [
-        batchJobs,
-        editContext?.sessionId,
-        effectiveFilters,
-        expandedBatchId,
-        loadBatchJobs,
-        loadRecentBatches,
-    ]);
-    const handleRetryBatch = useCallback(async (batch) => {
-        const batchId = batch.id;
-        const jobs = batchJobs[batchId] ?? (await loadBatchJobs(batchId));
-        await handleRetryJobs(batchId, batch.provider, jobs, `batch:${batchId}`);
-    }, [batchJobs, handleRetryJobs, loadBatchJobs]);
-    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-medium tracking-[0.06em] text-neutral-grey-50";
-    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-neutral-grey-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-neutral-grey-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-neutral-grey-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-neutral-grey-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-neutral-grey-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-neutral-grey-50 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-highlight-100 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-neutral-grey-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-neutral-grey-50 hover:text-neutral-grey-100 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-neutral-grey-50 hover:text-neutral-grey-100 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-border-default px-3 py-2 text-[11px] text-neutral-grey-50", 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-neutral-grey-50", children: [_jsx(LoaderIcon, { className: "h-5 w-5 animate-spin text-highlight-100" }), "Loading recent translations..."] }) })) : groupedBatches.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-32", children: _jsxs("div", { className: "text-center text-neutral-grey-50", children: [_jsx(LanguagesIcon, { className: "h-8 w-8 block mx-auto mb-2 text-neutral-grey-15" }), _jsx("p", { className: "font-medium text-neutral-grey-100", 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-medium tracking-[0.08em] text-neutral-grey-50", children: dateGroup.label }), _jsx("span", { className: "flex-1 ml-2 border-t border-border-default" })] }), _jsx("div", { className: "divide-y divide-border-default/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-feedback-red"
-                                            : anyInProgress
-                                                ? "bg-highlight-100"
-                                                : anyAborted
-                                                    ? "bg-feedback-orange"
-                                                    : "bg-feedback-green/70";
-                                        const metaParts = [];
-                                        metaParts.push(_jsxs("span", { className: "text-neutral-grey-100", 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-neutral-grey-100", 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 canRetry = anyError;
-                                        const canAbort = isActiveBatchStatus(info?.status);
-                                        const canDelete = isTerminalBatchStatus(info?.status);
-                                        const isRetryingBatch = retryingKeys.has(`batch:${b.id}`);
-                                        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-neutral-grey-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-highlight-100" })) : (_jsx("span", { className: `h-1.5 w-1.5 shrink-0 rounded-full ${statusDotClass}`, "aria-hidden": "true" })), _jsx("span", { className: "text-neutral-grey-100 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-feedback-red" : "text-highlight-100"}`, "data-testid": `batch-progress-${b.id}`, children: [completedJobs, "/", totalJobs, anyError && (_jsxs("span", { className: "text-feedback-red", 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-neutral-grey-50 pl-4", children: [metaParts.map((part, i) => (_jsxs(React.Fragment, { children: [i > 0 && (_jsx("span", { className: "text-neutral-grey-15", children: "\u00B7" })), part] }, i))), info?.lastUpdatedUtc && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-neutral-grey-15", children: "\u00B7" }), _jsx("span", { children: new Date(info.lastUpdatedUtc).toLocaleString() })] }))] })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [canRetry && (_jsx(SimpleIconButton, { onClick: (event) => {
-                                                                            event.stopPropagation();
-                                                                            void handleRetryBatch(info);
-                                                                        }, icon: _jsx(RetryIcon, { className: `h-3.5 w-3.5 ${isRetryingBatch ? "animate-spin" : ""}`, strokeWidth: 1.5 }), label: "Retry failed translations", disabled: isRetryingBatch ||
-                                                                            isLoadingThis ||
-                                                                            isAborting ||
-                                                                            isDeleting, className: "p-0! text-feedback-red hover:text-feedback-red" })), 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-feedback-orange hover:text-feedback-orange" })), canDelete && (_jsx(SimpleIconButton, { onClick: (event) => {
-                                                                            event.stopPropagation();
-                                                                            handleDeleteBatch(b.id);
-                                                                        }, icon: _jsx(DeleteIcon, { size: "md" }), label: "Delete translation history", disabled: isDeleting || isAborting, className: "p-0! text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-50" })), _jsx("div", { className: `text-neutral-grey-15 transition-transform ${isExpanded ? "rotate-180" : ""} group-hover:text-neutral-grey-50`, children: _jsx(ChevronDownIcon, { className: "h-4 w-4" }) })] })] }) }), isExpanded && (_jsxs(_Fragment, { children: [_jsx(CustomPromptPanel, { prompts: parseCustomPrompts(info?.metadata) }), _jsx(BatchItemList, { batchId: b.id, batchProvider: info?.provider, 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, retryingKeys: retryingKeys, onToggleItem: toggleItem, onOpenItem: openItemInEditor, onRetryJobs: handleRetryJobs })] }))] }, 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-highlight-100" }), "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-feedback-red", label: "Has errors" };
-    if (hasInProgress)
-        return { cls: "bg-highlight-100", label: "In progress" };
-    if (hasPending)
-        return { cls: "bg-neutral-grey-15", label: "Queued" };
-    if (hasAborted)
-        return { cls: "bg-feedback-orange", label: "Aborted" };
-    return { cls: "bg-feedback-green/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-neutral-grey-5/60 border-t border-border-default/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-neutral-grey-50 hover:bg-neutral-grey-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-highlight-100", strokeWidth: 1.75 }), _jsx("span", { className: "text-neutral-grey-100", children: "Custom prompt" }), _jsx("span", { className: "text-neutral-grey-15", 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-neutral-grey-50 hover:text-neutral-grey-100" })), _jsx(ChevronDownIcon, { className: `h-3.5 w-3.5 text-neutral-grey-15 transition-transform group-hover:text-neutral-grey-50 ${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-border-default/50 bg-white p-2 font-mono text-[12px] text-neutral-grey-100", children: p.prompt }) }))] }, p.provider));
-        }) }));
-}
-function BatchItemList({ batchId, batchProvider, jobs, isLoading, expandedItems, languages, itemFilter, itemIncludeSubitems, statusFilter, batchIsTerminal, batchStartedAtUtc, retryingKeys, onToggleItem, onOpenItem, onRetryJobs, }) {
-    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-neutral-grey-50", children: [_jsx(LoaderIcon, { className: "inline h-3.5 w-3.5 mr-1.5 animate-spin text-highlight-100" }), "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-neutral-grey-50", 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-neutral-grey-5/60 divide-y divide-border-default/50 border-t border-border-default/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();
-            const itemErrorJobs = itemJobs.filter(isRetriableJob);
-            const itemRetryKey = `item:${batchId}:${itemId}`;
-            const isRetryingItem = retryingKeys.has(itemRetryKey);
-            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-neutral-grey-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-highlight-100" })) : itemIsQueued ? (_jsx(QueuedIcon, { className: "h-3 w-3 text-neutral-grey-50", 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-neutral-grey-100 truncate", title: titleAttr, children: displayName }), _jsxs("span", { className: "text-[11px] text-neutral-grey-50 shrink-0", children: ["\u00B7 ", uniqueLangs.length, " language", uniqueLangs.length !== 1 ? "s" : ""] })] }), itemPath && (_jsx("div", { className: "text-[11px] text-neutral-grey-50 truncate font-mono", title: titleAttr, children: itemPath }))] }), itemErrorJobs.length > 0 && (_jsx(SimpleIconButton, { onClick: (event) => {
-                                        event.stopPropagation();
-                                        void onRetryJobs(batchId, batchProvider, itemErrorJobs, itemRetryKey);
-                                    }, icon: _jsx(RetryIcon, { className: `h-3.5 w-3.5 ${isRetryingItem ? "animate-spin" : ""}`, strokeWidth: 1.5 }), label: "Retry failed translations for this item", disabled: isRetryingItem, className: "mt-0.5 p-0! text-feedback-red hover:text-feedback-red" })), _jsx("span", { className: "mt-1 shrink-0 text-neutral-grey-15 group-hover:text-neutral-grey-50", 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());
-                            const retryKey = `job:${job.id ?? `${job.itemId}:${job.sourceLanguage}:${job.targetLanguage}`}`;
-                            return (_jsx(LanguageJobChip, { job: job, language: lang, batchStartedAtUtc: batchStartedAtUtc, onOpen: () => onOpenItem(job.itemId, job.targetLanguage), isRetrying: retryingKeys.has(retryKey), onRetry: () => onRetryJobs(batchId, batchProvider, [job], retryKey) }, `${job.id ?? idx}-${job.targetLanguage}`));
-                        }) }))] }, itemId));
-        }) }));
-}
-function LanguageJobChip({ job, language, batchStartedAtUtc, onOpen, isRetrying = false, onRetry, }) {
-    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-feedback-red bg-feedback-red-light text-feedback-red hover:bg-feedback-red-light"
-        : jobAborted
-            ? "border-feedback-orange bg-feedback-orange-light text-feedback-orange hover:bg-feedback-orange-light"
-            : jobInProgress
-                ? "border-highlight-100/30 bg-highlight-10 text-highlight-100 hover:brightness-95"
-                : jobPending
-                    ? "border-border-default bg-neutral-grey-5 text-neutral-grey-50 hover:bg-neutral-grey-5"
-                    : "border-border-default bg-background text-neutral-grey-100 hover:bg-neutral-grey-5";
-    const statusBadgeCls = jobError
-        ? "bg-feedback-red-light text-feedback-red ring-1 ring-inset ring-feedback-red"
-        : jobAborted
-            ? "bg-feedback-orange-light text-feedback-orange ring-1 ring-inset ring-feedback-orange"
-            : jobInProgress
-                ? "bg-highlight-10 text-highlight-100 ring-1 ring-inset ring-highlight-100/20"
-                : jobPending
-                    ? "bg-neutral-grey-5 text-neutral-grey-50 ring-1 ring-inset ring-border-default"
-                    : "bg-feedback-green-light text-feedback-green ring-1 ring-inset ring-feedback-green";
-    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 badge-pad-sm 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-feedback-green" }))] }) }), _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-border-default 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-neutral-grey-100 truncate", children: langName }), _jsxs("div", { className: "text-[11px] text-neutral-grey-50 font-mono truncate", children: [job.targetLanguage, job.sourceLanguage ? ` ← ${job.sourceLanguage}` : ""] })] }), _jsxs("span", { className: `inline-flex items-center gap-1 rounded-badge badge-pad-sm text-2xs font-medium ${statusBadgeCls}`, children: [jobInProgress && (_jsx(LoaderIcon, { className: "h-2.5 w-2.5 animate-spin" })), jobStatus || "Unknown"] })] }), _jsxs("dl", { className: "divide-y divide-border-default/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] tracking-wide text-neutral-grey-50", children: "Claimed" }), _jsx("dd", { className: "text-[12px] text-neutral-grey-100", 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] tracking-wide text-neutral-grey-50", children: "Updated" }), _jsx("dd", { className: "text-[12px] text-neutral-grey-100", 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] tracking-wide text-neutral-grey-50", children: jobInProgress || jobPending ? "Running" : "Duration" }), _jsxs("dd", { className: "text-[12px] tabular-nums text-neutral-grey-100", 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] tracking-wide text-neutral-grey-50", children: "Fields" }), _jsxs("dd", { className: "text-[12px] tabular-nums text-neutral-grey-100", children: [fieldText, emptyFieldText ? (_jsxs("span", { className: "ml-1.5 text-neutral-grey-50", 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] tracking-wide text-neutral-grey-50", children: "Text" }), _jsxs("dd", { className: "text-[12px] tabular-nums text-neutral-grey-100", 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] tracking-wide text-neutral-grey-50", children: "Cost" }), _jsx("dd", { className: "text-[12px] tabular-nums text-neutral-grey-100", 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] tracking-wide text-neutral-grey-50", children: "Heartbeat" }), _jsx("dd", { className: "text-[12px] text-neutral-grey-100", 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] tracking-wide text-neutral-grey-50", children: "Attempts" }), _jsx("dd", { className: "text-[12px] tabular-nums text-neutral-grey-100", 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] tracking-wide text-neutral-grey-50", children: "Hash" }), _jsx("dd", { className: "text-[11px] font-mono text-neutral-grey-100 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] tracking-wide text-neutral-grey-50", children: jobError ? "Error" : jobAborted ? "Aborted" : "Message" }), _jsx("dd", { className: `text-[12px] break-words ${jobError ? "text-feedback-red" : jobAborted ? "text-feedback-orange" : "text-neutral-grey-100"}`, 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] tracking-wide text-neutral-grey-50", children: "Batch" }), _jsx("dd", { className: "text-[11px] font-mono text-neutral-grey-50 break-all", children: job.batchId })] }))] }), _jsxs("div", { className: "flex justify-end gap-2 border-t border-border-default px-3 py-2", children: [jobError && onRetry && (_jsxs(Button, { size: "sm", variant: "outline", disabled: isRetrying, onClick: (e) => {
-                                    e.stopPropagation();
-                                    void onRetry();
-                                    setOpen(false);
-                                }, className: "gap-1.5", children: [_jsx(RetryIcon, { className: `h-3.5 w-3.5 ${isRetrying ? "animate-spin" : ""}` }), "Retry"] })), _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"] })] })] })] }));
-}