@parhelia/localization 0.1.12910 → 0.1.12912

package/dist/translation-center/TranslationBatches.js

@@ -1,23 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState, useMemo } from "react";
+import { useCallback, useEffect, useRef, useState, useMemo, useSyncExternalStore, } from "react";
 import React from "react";
-import { Button, Badge, Select, Input, UserPicker, Popover, PopoverContent, PopoverTrigger, ContentTree, fetchItemStubs, searchUsers as searchBackendUsers, useEditContext, getLanguages, SimpleIconButton, DeleteIcon, } from "@parhelia/core";
+import { Button, Badge, Select, Input, UserPicker, Popover, PopoverContent, PopoverTrigger, Tooltip, TooltipContent, TooltipTrigger, ContentTree, PageHeader, fetchItemStubs, searchUsers as searchBackendUsers, useEditContext, getLanguages, SimpleIconButton, DeleteIcon, formatDateTime, } from "@parhelia/core";
 import { listBatches, getTranslationProviders, listBatchTranslationJobs, retryBatchTranslation, abortBatch, deleteBatch, } from "../services/translationService";
 import { TRANSLATION_BATCH_STARTED_EVENT, } from "../translationEvents";
 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 { X, ChevronDown, Languages, Loader2, Globe, FolderTree, ExternalLink, Check, AlertCircle, CircleStop, Hourglass, Copy, Sparkles, RotateCcw, Plus, } from "lucide-react";
 import { toast } from "sonner";
+import { openLocalizeItemDialog } from "../LocalizeItemCommand";
 // 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);
@@ -27,6 +23,70 @@ 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 PlusIcon = (props) => React.createElement(Plus, props);
+function renderTargetLanguageIcon(language) {
+    if (language.icon) {
+        return React.createElement("img", {
+            src: language.icon,
+            className: "h-4 w-5 object-cover",
+            alt: "",
+            "aria-hidden": true,
+        });
+    }
+    return React.createElement(GlobeIcon, {
+        className: "h-3.5 w-3.5 text-neutral-grey-50",
+        strokeWidth: 1.5,
+        "aria-hidden": true,
+    });
+}
+const DEFAULT_FILTERS = {
+    dateRange: "last30days",
+    status: "all",
+    user: "all",
+    provider: "all",
+    targetLanguage: "all",
+    itemIdOrPath: "",
+    itemIncludeSubitems: false,
+};
+let filterSnapshot = {
+    filters: DEFAULT_FILTERS,
+    itemIdOrPathInput: "",
+};
+let defaultUserInitialized = false;
+const filterListeners = new Set();
+function emitFilterSnapshot() {
+    filterListeners.forEach((listener) => listener());
+}
+function subscribeFilterSnapshot(listener) {
+    filterListeners.add(listener);
+    return () => filterListeners.delete(listener);
+}
+function getFilterSnapshot() {
+    return filterSnapshot;
+}
+function setTranslationBatchFilters(updater) {
+    const nextFilters = typeof updater === "function" ? updater(filterSnapshot.filters) : updater;
+    filterSnapshot = { ...filterSnapshot, filters: nextFilters };
+    emitFilterSnapshot();
+}
+function setTranslationBatchItemInput(value) {
+    filterSnapshot = { ...filterSnapshot, itemIdOrPathInput: value };
+    emitFilterSnapshot();
+}
+function ensureDefaultTranslationBatchUser(currentUserName) {
+    if (defaultUserInitialized || currentUserName === "all")
+        return;
+    defaultUserInitialized = true;
+    if (filterSnapshot.filters.user !== "all")
+        return;
+    setTranslationBatchFilters((previous) => ({
+        ...previous,
+        user: currentUserName,
+    }));
+}
+function useTranslationBatchFilterSnapshot() {
+    return useSyncExternalStore(subscribeFilterSnapshot, getFilterSnapshot, getFilterSnapshot);
+}
 const DATE_RANGE_OPTIONS = [
     { value: "lastHour", label: "Last Hour" },
     { value: "last24hours", label: "Last 24 Hours" },
@@ -78,6 +138,9 @@ function normalizeGuid(value) {
         .replace(/[{}()]/g, "")
         .toLowerCase();
 }
+function normalizeLanguageCode(value) {
+    return (value ?? "").toString().trim().toLowerCase();
+}
 function dateRangeToFromUtc(range) {
     const now = new Date();
     const cutoff = new Date(now);
@@ -114,14 +177,11 @@ function dateRangeToFromUtc(range) {
 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({});
@@ -138,21 +198,41 @@ export function TranslationBatches() {
     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,
-    });
+    const isMobile = editContext?.isMobile ?? false;
+    const rootRef = useRef(null);
+    const [isCompactBatches, setIsCompactBatches] = useState(isMobile);
+    const { filters } = useTranslationBatchFilterSnapshot();
+    useEffect(() => {
+        const node = rootRef.current;
+        if (!node)
+            return;
+        const updateLayout = () => {
+            setIsCompactBatches(isMobile || node.clientWidth < 640);
+        };
+        updateLayout();
+        let observer;
+        if (typeof ResizeObserver !== "undefined") {
+            observer = new ResizeObserver(updateLayout);
+            observer.observe(node);
+        }
+        window.addEventListener("resize", updateLayout);
+        return () => {
+            observer?.disconnect();
+            window.removeEventListener("resize", updateLayout);
+        };
+    }, [isMobile]);
+    useEffect(() => {
+        ensureDefaultTranslationBatchUser(currentUserName);
+    }, [currentUserName]);
     // Enforce current user filter for limited preview users
     useEffect(() => {
         if (isLimitedPreviewUser &&
             currentUserName !== "all" &&
             filters.user !== currentUserName) {
-            setFilters((prev) => ({ ...prev, user: currentUserName }));
+            setTranslationBatchFilters((prev) => ({
+                ...prev,
+                user: currentUserName,
+            }));
         }
     }, [isLimitedPreviewUser, currentUserName, filters.user]);
     const effectiveFilters = useMemo(() => {
@@ -220,29 +300,12 @@ export function TranslationBatches() {
         }
     }, []);
     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
+    // Load Sitecore languages for language chips in expanded batches.
     useEffect(() => {
         const loadLanguages = async () => {
             try {
@@ -385,13 +448,6 @@ export function TranslationBatches() {
             // 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)
@@ -549,7 +605,7 @@ export function TranslationBatches() {
     ]);
     const handleDeleteBatch = useCallback((batchId) => {
         editContext?.confirm({
-            header: "Delete Translation History",
+            header: "Delete Translation Batch from 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,
@@ -652,67 +708,310 @@ export function TranslationBatches() {
     const openItemInEditor = useCallback(async (itemId, language) => {
         const normalized = (itemId ?? "").toString().toLowerCase();
         editContext?.setShowAgentsWorkspaceEditor(true);
-        await editContext?.loadItem({ id: normalized, language, version: 0 });
+        await editContext?.loadItem(language ? { id: normalized, language, version: 0 } : normalized);
     }, [editContext]);
-    const totalBatches = groupedBatches.reduce((sum, group) => sum + group.batches.length, 0);
-    const isMobile = editContext?.isMobile ?? false;
+    return (_jsxs("div", { ref: rootRef, className: "flex h-full min-h-0 flex-col bg-neutral-grey-5", style: { padding: isCompactBatches ? 12 : 40 }, "data-testid": "translation-batches", children: [_jsx(PageHeader, { title: "Translation Batches", description: isMobile
+                    ? undefined
+                    : "Review translation history and manage batch progress", variant: "workspace", className: isCompactBatches ? "mb-4" : "mb-5" }), _jsx("main", { className: "min-h-0 min-w-0 flex-1 overflow-hidden rounded-[12px] bg-white", children: _jsx("div", { className: `h-full min-h-0 overflow-auto ${isCompactBatches ? "p-3" : "p-6"}`, 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() !== "" ||
+                                            filters.itemIncludeSubitems;
+                                        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: isCompactBatches ? "space-y-6" : "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-border-default divide-y overflow-hidden rounded-lg bg-white", children: dateGroup.batches.map((b) => {
+                                            const batchDate = new Date(b.timestamp);
+                                            const formattedBatchDate = formatDateTime(batchDate);
+                                            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 progressTone = anyError
+                                                ? "error"
+                                                : anyAborted
+                                                    ? "aborted"
+                                                    : progressPct >= 100
+                                                        ? "complete"
+                                                        : "active";
+                                            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"));
+                                            }
+                                            const ownerPart = info?.initiatedByUser ? (_jsx("span", { title: info.initiatedByUser, children: userDisplayNames[info.initiatedByUser] ||
+                                                    info.initiatedByUser }, "user")) : null;
+                                            const datePart = info?.lastUpdatedUtc ? (_jsx("span", { children: formatDateTime(new Date(info.lastUpdatedUtc)) }, "date")) : null;
+                                            const desktopMetaParts = [...metaParts];
+                                            if (!isCompactBatches) {
+                                                if (ownerPart)
+                                                    desktopMetaParts.push(ownerPart);
+                                                if (datePart)
+                                                    desktopMetaParts.push(datePart);
+                                            }
+                                            const mobileFooterMetaParts = [];
+                                            if (isCompactBatches) {
+                                                if (datePart)
+                                                    mobileFooterMetaParts.push(datePart);
+                                                if (ownerPart)
+                                                    mobileFooterMetaParts.push(ownerPart);
+                                            }
+                                            const batchDisplayName = (() => {
+                                                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 · ${formattedBatchDate}`);
+                                            })();
+                                            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);
+                                            const hasBatchActions = canRetry || canAbort || canDelete;
+                                            // 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";
+                                            const batchActions = (_jsxs(_Fragment, { children: [canRetry && (_jsx(SimpleIconButton, { onClick: (event) => {
+                                                            event.stopPropagation();
+                                                            if (!canRetry)
+                                                                return;
+                                                            void handleRetryBatch(info);
+                                                        }, icon: _jsx(RetryIcon, { className: `h-3.5 w-3.5 ${isRetryingBatch ? "animate-spin" : ""}`, strokeWidth: 1.5 }), label: "Retry failed translations", disabled: !canRetry ||
+                                                            isRetryingBatch ||
+                                                            isLoadingThis ||
+                                                            isAborting ||
+                                                            isDeleting })), canAbort && (_jsx(SimpleIconButton, { onClick: (event) => {
+                                                            event.stopPropagation();
+                                                            if (!canAbort)
+                                                                return;
+                                                            handleAbortBatch(b.id);
+                                                        }, icon: _jsx(AbortIcon, { className: `h-3.5 w-3.5 ${isAborting ? "animate-spin" : ""}`, strokeWidth: 1.5 }), label: "Abort translation batch", disabled: !canAbort || isAborting || isDeleting })), canDelete && (_jsx(SimpleIconButton, { onClick: (event) => {
+                                                            event.stopPropagation();
+                                                            if (!canDelete)
+                                                                return;
+                                                            handleDeleteBatch(b.id);
+                                                        }, icon: _jsx(DeleteIcon, { size: "md" }), label: "Delete translation batch from history", disabled: !canDelete || isDeleting || isAborting }))] }));
+                                            return (_jsxs("div", { "data-testid": `batch-row-${b.id}`, "data-batch-status": testStatus, children: [_jsx("div", { role: "button", tabIndex: 0, className: `group w-full cursor-pointer py-3 text-left transition-colors hover:bg-neutral-grey-5 ${isCompactBatches ? "px-2.5" : "px-4"}`, onClick: () => toggleBatch(b.id), onKeyDown: (e) => {
+                                                            if (e.key === "Enter" || e.key === " ") {
+                                                                e.preventDefault();
+                                                                toggleBatch(b.id);
+                                                            }
+                                                        }, children: _jsxs("div", { className: `flex items-start ${isCompactBatches ? "gap-2" : "gap-4"}`, children: [_jsx("div", { className: `shrink-0 text-neutral-grey-100 transition-transform ${isCompactBatches ? "mt-0.5" : "mt-3"} ${isExpanded ? "rotate-180" : ""}`, children: _jsx(ChevronDownIcon, { className: "h-4 w-4" }) }), !isCompactBatches && totalJobs > 0 && (_jsx(BatchProgressIndicator, { value: progressPct, completedJobs: completedJobs, totalJobs: totalJobs, errorJobs: errorJobs, tone: progressTone, testId: `batch-progress-${b.id}` })), _jsxs("div", { className: `flex min-w-0 flex-1 ${isCompactBatches
+                                                                        ? "flex-col gap-2"
+                                                                        : "items-center justify-between gap-3"}`, children: [_jsxs("div", { className: "grid min-w-0 flex-1 grid-cols-[minmax(0,1fr)]", children: [_jsx("span", { className: `min-w-0 text-[14px] font-medium text-neutral-grey-100 ${isCompactBatches
+                                                                                        ? "whitespace-normal break-words leading-5"
+                                                                                        : "truncate"}`, style: isCompactBatches
+                                                                                        ? { overflowWrap: "anywhere" }
+                                                                                        : undefined, title: formattedBatchDate, children: batchDisplayName }), _jsx("div", { className: "mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[12px] text-neutral-grey-50", children: desktopMetaParts.map((part, i) => (_jsxs(React.Fragment, { children: [i > 0 && (_jsx("span", { className: "text-neutral-grey-15", children: "\u00B7" })), part] }, i))) }), mobileFooterMetaParts.length > 0 && (_jsx("div", { className: "mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[12px] text-neutral-grey-50", children: mobileFooterMetaParts.map((part, i) => (_jsxs(React.Fragment, { children: [i > 0 && (_jsx("span", { className: "text-neutral-grey-15", children: "\u00B7" })), part] }, `footer-${i}`))) }))] }), isCompactBatches && (_jsxs("div", { className: "mt-2 flex min-w-0 items-center gap-2", children: [totalJobs > 0 && (_jsx("div", { className: "min-w-0 flex-1", children: _jsx(BatchProgressIndicator, { value: progressPct, completedJobs: completedJobs, totalJobs: totalJobs, errorJobs: errorJobs, tone: progressTone, testId: `batch-progress-${b.id}`, variant: "bar" }) })), hasBatchActions && (_jsx("div", { className: "flex shrink-0 items-center gap-1.5", children: batchActions }))] })), !isCompactBatches && hasBatchActions && (_jsx("div", { className: "flex shrink-0 items-center gap-2 self-center", children: batchActions }))] })] }) }), isExpanded && (_jsxs("div", { className: "border-t border-border-default/50", children: [_jsx(CustomPromptPanel, { prompts: parseCustomPrompts(info?.metadata) }), _jsx(BatchItemList, { batchId: b.id, batchProvider: info?.provider, jobs: jobs, isLoading: isLoadingThis, expandedItems: expandedItems, languages: sitecoreLanguages, currentLanguage: editContext?.item?.language, itemFilter: filters.itemIdOrPath.trim(), itemIncludeSubitems: filters.itemIncludeSubitems, statusFilter: filters.status, batchIsTerminal: isTerminalBatchStatus(info?.status), batchStartedAtUtc: info?.startedAtUtc ?? info?.createdAtUtc, retryingKeys: retryingKeys, isMobile: isMobile, 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"] })) }) }))] })) }) })] }));
+}
+export const TRANSLATION_BATCH_FILTERS_SIDEBAR_ID = "translation-batch-filters";
+export function TranslationBatchFiltersSidebar() {
+    const editContext = useEditContext();
+    const { filters, itemIdOrPathInput } = useTranslationBatchFilterSnapshot();
+    const [providers, setProviders] = useState([]);
+    const [sitecoreLanguages, setSitecoreLanguages] = useState([]);
+    const [itemPickerOpen, setItemPickerOpen] = useState(false);
+    const currentUserName = editContext?.user?.name || "all";
+    const isLimitedPreviewUser = editContext?.user?.isLimitedPreviewUser ?? false;
+    useEffect(() => {
+        ensureDefaultTranslationBatchUser(currentUserName);
+    }, [currentUserName]);
+    useEffect(() => {
+        if (isLimitedPreviewUser &&
+            currentUserName !== "all" &&
+            filters.user !== currentUserName) {
+            setTranslationBatchFilters((prev) => ({
+                ...prev,
+                user: currentUserName,
+            }));
+        }
+    }, [isLimitedPreviewUser, currentUserName, filters.user]);
+    const searchTranslationUsers = useCallback((query, limit) => searchBackendUsers(query, limit), []);
+    const debouncedSetItemFilter = useDebouncedCallback((value) => setTranslationBatchFilters((prev) => ({
+        ...prev,
+        itemIdOrPath: value,
+    })), 400);
+    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();
+    }, []);
+    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();
+    }, []);
+    const languageOptions = useMemo(() => sitecoreLanguages
+        .map((language) => {
+        const code = language.languageCode || language.name;
+        return code ? { ...language, languageCode: code } : null;
+    })
+        .filter((language) => language !== null)
+        .sort((a, b) => a.languageCode.localeCompare(b.languageCode)), [sitecoreLanguages]);
+    const currentItem = editContext?.item;
+    const multiItemEnabled = editContext?.configuration?.localization?.multiItem !== false;
+    const canStartTranslation = !!editContext && (multiItemEnabled || !!currentItem);
+    const handleStartTranslation = useCallback(() => {
+        if (!editContext)
+            return;
+        void openLocalizeItemDialog({
+            editContext,
+            items: currentItem ? [currentItem] : [],
+        });
+    }, [currentItem, editContext]);
     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) => ({
+        filters.itemIdOrPath.trim() !== "" ||
+        filters.itemIncludeSubitems;
+    const resetFilters = useCallback(() => {
+        debouncedSetItemFilter.cancel();
+        setTranslationBatchItemInput("");
+        setTranslationBatchFilters({
+            ...DEFAULT_FILTERS,
+            user: currentUserName,
+        });
+    }, [currentUserName, debouncedSetItemFilter]);
+    const filterLabelClass = "text-[12px] font-medium text-neutral-grey-50";
+    const filterFieldClass = "flex flex-col gap-1";
+    return (_jsxs("div", { className: "flex h-full min-h-0 flex-col bg-white", "data-testid": "translation-filters-sidebar", children: [_jsx("div", { className: "border-border-default flex shrink-0 flex-col gap-2 border-b px-3 py-3", children: _jsxs(Button, { type: "button", variant: "outline", size: "lg", title: canStartTranslation
+                        ? "Start new translation"
+                        : "Open an item to translate", "data-testid": "translation-sidebar-start-new-translation-button", disabled: !canStartTranslation, onClick: handleStartTranslation, className: "border-border-default hover:border-neutral-grey-100 hover:bg-neutral-grey-5 h-9 w-full justify-center gap-3 rounded-md bg-white px-3 text-sm font-medium shadow-none", children: [_jsx("span", { className: "truncate", children: "Start new translation" }), _jsx(PlusIcon, { className: "size-4", strokeWidth: 1.5 })] }) }), _jsx("div", { className: "min-h-0 flex-1 overflow-y-auto px-3 py-4", children: _jsxs("div", { className: "grid gap-4", children: [_jsxs("div", { className: filterFieldClass, children: [_jsx("label", { className: filterLabelClass, children: "Date Range" }), _jsx(Select, { className: "w-full bg-white", options: DATE_RANGE_OPTIONS, value: filters.dateRange, onValueChange: (value) => setTranslationBatchFilters((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) => ({
+                                    })), placeholder: "Select date range" })] }), _jsxs("div", { className: filterFieldClass, children: [_jsx("label", { className: filterLabelClass, children: "Status" }), _jsx(Select, { className: "w-full bg-white", options: STATUS_OPTIONS, value: filters.status, onValueChange: (value) => setTranslationBatchFilters((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
+                                    })), placeholder: "Select status" })] }), _jsxs("div", { className: filterFieldClass, children: [_jsx("label", { className: filterLabelClass, children: "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) => ({
+                                        : undefined, displayAvatarName: isLimitedPreviewUser || filters.user === currentUserName
+                                        ? editContext?.user?.fullName?.trim() || currentUserName
+                                        : undefined, displayAvatarUrl: isLimitedPreviewUser || filters.user === currentUserName
+                                        ? editContext?.user?.avatarUrl
+                                        : undefined, onChange: (user) => setTranslationBatchFilters((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: [
+                                    })), disabled: isLimitedPreviewUser, placeholder: "All Users", buttonClassName: "h-auto min-h-[34px] w-full justify-start rounded-md border bg-white py-2 text-xs font-medium", allowClear: true, clearLabel: "All Users", showIcon: isLimitedPreviewUser || filters.user !== "all", searchUsers: searchTranslationUsers })] }), _jsxs("div", { className: filterFieldClass, children: [_jsx("label", { className: filterLabelClass, children: "Provider" }), _jsx(Select, { className: "w-full bg-white", 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.provider, onValueChange: (value) => setTranslationBatchFilters((prev) => ({
+                                        ...prev,
+                                        provider: value,
+                                    })), placeholder: "Select provider" })] }), _jsxs("div", { className: filterFieldClass, children: [_jsx("label", { className: filterLabelClass, children: "Target Language" }), _jsx(Select, { className: "w-full bg-white", options: [
+                                        {
+                                            value: "all",
+                                            label: "All Languages",
+                                        },
+                                        ...languageOptions.map((language) => ({
+                                            value: language.languageCode,
+                                            label: language.languageCode,
+                                            icon: renderTargetLanguageIcon(language),
                                         })),
-                                    ], 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) => ({
+                                    ], value: filters.targetLanguage, onValueChange: (value) => setTranslationBatchFilters((prev) => ({
+                                        ...prev,
+                                        targetLanguage: value,
+                                    })), placeholder: "Select language" })] }), _jsxs("div", { className: filterFieldClass, children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("label", { className: filterLabelClass, children: "Item ID / Path" }), _jsxs("label", { className: "flex cursor-pointer items-center gap-1 text-[10px] text-neutral-grey-50 select-none", children: [_jsx("input", { type: "checkbox", checked: filters.itemIncludeSubitems, onChange: (e) => setTranslationBatchFilters((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) => {
+                                                    })), className: "h-3 w-3 cursor-pointer accent-highlight-100" }), "Include subitems"] })] }), _jsxs("div", { className: "relative", children: [_jsx(Input, { value: itemIdOrPathInput, onChange: (e) => {
                                                 const next = e.target.value;
-                                                setItemIdOrPathInput(next);
+                                                setTranslationBatchItemInput(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("");
+                                            }, placeholder: "GUID or /sitecore/content/...", className: "h-auto min-h-[34px] w-full bg-white py-2 pr-14 text-xs" }), _jsxs("div", { className: "absolute top-1/2 right-1.5 flex -translate-y-1/2 items-center gap-1", children: [itemIdOrPathInput && (_jsx("button", { type: "button", onClick: () => {
+                                                        setTranslationBatchItemInput("");
                                                         debouncedSetItemFilter.cancel();
-                                                        setFilters((prev) => ({
+                                                        setTranslationBatchFilters((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) => {
+                                                    }, className: "cursor-pointer text-neutral-grey-50 hover:text-neutral-grey-100", "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: "cursor-pointer text-neutral-grey-50 hover:text-neutral-grey-100", "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"], initialExpandedKeys: [
+                                                                            "0de95ae4-41ab-4d01-9eb0-67441b7c2450",
+                                                                        ], onSelectionChange: (items) => {
                                                                             const picked = items?.[0];
                                                                             if (!picked)
                                                                                 return;
                                                                             const applyValue = (value) => {
-                                                                                setItemIdOrPathInput(value);
+                                                                                setTranslationBatchItemInput(value);
                                                                                 debouncedSetItemFilter.cancel();
-                                                                                setFilters((prev) => ({
+                                                                                setTranslationBatchFilters((prev) => ({
                                                                                     ...prev,
                                                                                     itemIdOrPath: value,
                                                                                 }));
@@ -722,134 +1021,19 @@ export function TranslationBatches() {
                                                                                 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 },
+                                                                                {
+                                                                                    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"] })) }) }))] })) })] }));
+                                                                        } }) })] })] })] })] })] }), _jsx("div", { className: "flex justify-start pt-1", children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", onClick: resetFilters, disabled: !hasActiveFilters, children: [_jsx(XIcon, { className: "h-3.5 w-3.5" }), "Reset Filters"] }) })] }) })] }));
 }
 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());
@@ -932,6 +1116,45 @@ function formatUsdCost(value) {
         maximumFractionDigits: value > 0 && value < 0.01 ? 6 : 2,
     }).format(value);
 }
+function BatchProgressIndicator({ value, completedJobs, totalJobs, errorJobs, tone, testId, variant = "circle", }) {
+    const percent = Math.max(0, Math.min(100, Math.round(value)));
+    const radius = 17;
+    const circumference = 2 * Math.PI * radius;
+    const dashOffset = circumference - (percent / 100) * circumference;
+    const hasErrors = errorJobs > 0;
+    const toneClass = tone === "complete"
+        ? "text-feedback-green"
+        : tone === "error"
+            ? "text-feedback-red"
+            : tone === "aborted"
+                ? "text-feedback-orange"
+                : "text-neutral-grey-50";
+    const toneColor = tone === "complete"
+        ? "var(--color-feedback-green)"
+        : tone === "error"
+            ? "var(--color-feedback-red)"
+            : tone === "aborted"
+                ? "var(--color-feedback-orange)"
+                : "var(--color-neutral-grey-50)";
+    const trackColor = tone === "complete"
+        ? "var(--color-feedback-green-light)"
+        : tone === "error"
+            ? "var(--color-feedback-red-light)"
+            : tone === "aborted"
+                ? "var(--color-feedback-orange-light)"
+                : "var(--color-neutral-grey-15)";
+    const label = `${percent}% complete (${completedJobs}/${totalJobs} translations${hasErrors ? `, ${errorJobs} failed` : ""})`;
+    if (variant === "bar") {
+        return (_jsxs(Tooltip, { delayDuration: 250, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: "flex min-w-0 items-center gap-2", "aria-label": label, "data-testid": testId, children: [_jsx("div", { className: "h-1.5 min-w-0 flex-1 overflow-hidden rounded-full", style: { backgroundColor: trackColor }, children: _jsx("div", { className: "h-full rounded-full transition-[width]", style: {
+                                        width: `${percent}%`,
+                                        backgroundColor: toneColor,
+                                    } }) }), _jsxs("span", { className: `shrink-0 text-[11px] leading-none font-medium tabular-nums ${toneClass}`, children: [percent, "%"] })] }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: label })] }));
+    }
+    return (_jsxs(Tooltip, { delayDuration: 250, children: [_jsx(TooltipTrigger, { asChild: true, children: _jsxs("div", { className: `relative h-10 w-10 shrink-0 rounded-full ${tone === "complete" ? "bg-feedback-green-light" : ""}`, "aria-label": label, "data-testid": testId, children: [_jsxs("svg", { className: "h-10 w-10 -rotate-90", viewBox: "0 0 40 40", children: [_jsx("circle", { cx: "20", cy: "20", r: radius, fill: "none", stroke: trackColor, strokeWidth: "2" }), _jsx("circle", { cx: "20", cy: "20", r: radius, fill: "none", stroke: toneColor, strokeLinecap: "round", strokeWidth: "2", style: {
+                                        strokeDasharray: circumference,
+                                        strokeDashoffset: dashOffset,
+                                    } })] }), _jsxs("span", { className: `absolute inset-0 flex items-center justify-center text-[10px] leading-none font-medium tabular-nums ${toneClass}`, children: [percent, "%"] })] }) }), _jsx(TooltipContent, { side: "top", sideOffset: 6, children: label })] }));
+}
 function itemStatusDot(jobs) {
     const hasError = jobs.some((j) => j.status === "Error");
     const hasInProgress = jobs.some((j) => j.status === "In Progress");
@@ -947,6 +1170,30 @@ function itemStatusDot(jobs) {
         return { cls: "bg-feedback-orange", label: "Aborted" };
     return { cls: "bg-feedback-green/70", label: "Completed" };
 }
+function InlineLanguageJobChips({ batchId, batchProvider, jobs, languageMap, isExpanded, batchStartedAtUtc, retryingKeys, singleLine = false, onToggle, onOpenItem, onRetryJobs, }) {
+    if (jobs.length === 0)
+        return null;
+    const handleCellClick = (event) => {
+        event.stopPropagation();
+        onToggle();
+    };
+    const handleCellKeyDown = (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            event.stopPropagation();
+            onToggle();
+        }
+    };
+    return (_jsx("div", { role: "button", tabIndex: 0, className: `flex min-w-0 cursor-pointer items-start justify-start gap-1.5 ${singleLine
+            ? "flex-nowrap"
+            : isExpanded
+                ? "flex-wrap"
+                : "max-h-7 flex-wrap overflow-hidden"}`, "aria-label": `${jobs.length} target language${jobs.length !== 1 ? "s" : ""}`, "aria-expanded": isExpanded, onClick: handleCellClick, onKeyDown: handleCellKeyDown, children: jobs.map((job, idx) => {
+            const lang = languageMap.get((job.targetLanguage || "").toLowerCase());
+            const retryKey = `job:${job.id ?? `${job.itemId}:${job.sourceLanguage}:${job.targetLanguage}`}`;
+            return (_jsx("span", { className: "shrink-0", onClick: (event) => event.stopPropagation(), children: _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}`));
+        }) }));
+}
 function CustomPromptPanel({ prompts }) {
     const [openProvider, setOpenProvider] = React.useState(null);
     const [copiedProvider, setCopiedProvider] = React.useState(null);
@@ -971,7 +1218,7 @@ function CustomPromptPanel({ prompts }) {
             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) => {
+    return (_jsx("div", { className: "border-b 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) => {
@@ -982,10 +1229,10 @@ function CustomPromptPanel({ prompts }) {
                         }, 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));
+                                        }, 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" })), _jsx(ChevronDownIcon, { className: `h-3.5 w-3.5 text-neutral-grey-100 transition-transform ${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, }) {
+function BatchItemList({ batchId, batchProvider, jobs, isLoading, expandedItems, languages, currentLanguage, itemFilter, itemIncludeSubitems, statusFilter, batchIsTerminal, batchStartedAtUtc, retryingKeys, isMobile = false, onToggleItem, onOpenItem, onRetryJobs, }) {
     const languageMap = React.useMemo(() => {
         const map = new Map();
         for (const l of languages) {
@@ -1066,6 +1313,57 @@ function BatchItemList({ batchId, batchProvider, jobs, isLoading, expandedItems,
             return [];
         return filteredJobs.filter((j) => matchingItemIds.has((j.itemId || "").toString().toLowerCase()));
     }, [filteredJobs, statusFilter]);
+    const [stackLanguageChips, setStackLanguageChips] = React.useState(isMobile);
+    const itemTableContainerRef = React.useRef(null);
+    const itemTableRef = React.useRef(null);
+    const normalTableMinWidthRef = React.useRef(null);
+    React.useEffect(() => {
+        const container = itemTableContainerRef.current;
+        const table = itemTableRef.current;
+        if (!container || !table)
+            return;
+        const updateLayout = () => {
+            const availableWidth = container.clientWidth;
+            if (!availableWidth)
+                return;
+            if (isMobile || availableWidth < 640) {
+                setStackLanguageChips(true);
+                return;
+            }
+            if (stackLanguageChips) {
+                const normalMinWidth = normalTableMinWidthRef.current;
+                if (normalMinWidth && availableWidth >= normalMinWidth) {
+                    setStackLanguageChips(false);
+                }
+                return;
+            }
+            const requiredWidth = table.scrollWidth;
+            normalTableMinWidthRef.current = requiredWidth;
+            if (requiredWidth > availableWidth + 1) {
+                setStackLanguageChips(true);
+            }
+        };
+        updateLayout();
+        const animationFrame = window.requestAnimationFrame(updateLayout);
+        const timeout = window.setTimeout(updateLayout, 150);
+        let observer;
+        if (typeof ResizeObserver !== "undefined") {
+            observer = new ResizeObserver(updateLayout);
+            observer.observe(container);
+            observer.observe(table);
+        }
+        window.addEventListener("resize", updateLayout);
+        return () => {
+            window.cancelAnimationFrame(animationFrame);
+            window.clearTimeout(timeout);
+            observer?.disconnect();
+            window.removeEventListener("resize", updateLayout);
+        };
+    }, [
+        isMobile,
+        stackLanguageChips,
+        statusFilteredJobs,
+    ]);
     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"] }));
     }
@@ -1083,37 +1381,46 @@ function BatchItemList({ batchId, batchProvider, jobs, isLoading, expandedItems,
             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));
-        }) }));
+    return (_jsx("div", { ref: itemTableContainerRef, className: "w-full overflow-hidden", "data-language-layout": stackLanguageChips ? "stacked" : "columns", children: _jsxs("table", { ref: itemTableRef, className: "w-full border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { children: [!stackLanguageChips && (_jsx("th", { "aria-hidden": "true", className: "px-3 pt-3 pb-1 md:px-4" })), _jsx("th", { scope: "col", className: `pt-3 pb-1 text-left align-top text-[11px] font-medium text-neutral-grey-50 ${stackLanguageChips ? "pr-2 pl-2.5" : "pr-4"}`, children: _jsxs("span", { className: "flex min-w-0 items-center gap-2.5", children: [_jsx("span", { className: "h-1.5 w-1.5 shrink-0", "aria-hidden": "true" }), _jsx("span", { children: "Pages / Items" })] }) }), !stackLanguageChips && (_jsx("th", { scope: "col", className: "pt-3 pb-1 pr-2 text-left align-top text-[11px] font-medium text-neutral-grey-50", children: "Languages" })), !stackLanguageChips && (_jsx("th", { "aria-hidden": "true", className: "pt-3 pr-3 pb-1 md:pr-4" }))] }) }), _jsx("tbody", { children: Array.from(byItem.entries()).map(([itemId, itemJobs], itemIndex) => {
+                        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 = serverName || metadataName || itemId;
+                        const titleAttr = `${itemPath ?? ""}\n${itemId}`.trim();
+                        const itemErrorJobs = itemJobs.filter(isRetriableJob);
+                        const itemRetryKey = `item:${batchId}:${itemId}`;
+                        const isRetryingItem = retryingKeys.has(itemRetryKey);
+                        const rowLanguages = itemJobs
+                            .map((job) => job.targetLanguage || job.sourceLanguage)
+                            .filter((language) => Boolean(language));
+                        const normalizedCurrentLanguage = normalizeLanguageCode(currentLanguage);
+                        const rowOpenLanguage = rowLanguages.find((language) => normalizeLanguageCode(language) === normalizedCurrentLanguage) ?? rowLanguages[0];
+                        const languageChips = (_jsx(InlineLanguageJobChips, { batchId: batchId, batchProvider: batchProvider, jobs: itemJobs, languageMap: languageMap, isExpanded: isItemExpanded, batchStartedAtUtc: batchStartedAtUtc, retryingKeys: retryingKeys, singleLine: !stackLanguageChips, onToggle: () => onToggleItem(itemId), onOpenItem: onOpenItem, onRetryJobs: onRetryJobs }));
+                        const showRetryAction = itemErrorJobs.length > 0;
+                        const retryAction = showRetryAction ? (_jsx("div", { className: "flex shrink-0 items-center justify-end", children: _jsx(SimpleIconButton, { onClick: (event) => {
+                                    event.stopPropagation();
+                                    if (itemErrorJobs.length === 0)
+                                        return;
+                                    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: itemErrorJobs.length === 0 || isRetryingItem }) })) : null;
+                        const itemContent = (_jsxs("div", { className: `flex min-w-0 items-start ${stackLanguageChips ? "gap-2" : "gap-2.5"}`, 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: [_jsx("span", { className: `block min-w-0 text-[13px] text-neutral-grey-100 ${stackLanguageChips ? "break-words" : "truncate"}`, style: stackLanguageChips
+                                                ? { overflowWrap: "anywhere" }
+                                                : undefined, title: titleAttr, children: displayName }), itemPath && (_jsx("div", { className: "whitespace-normal break-words font-mono text-[11px] text-neutral-grey-50", style: { overflowWrap: "anywhere" }, title: titleAttr, children: itemPath })), stackLanguageChips && (_jsx("div", { className: "mt-2", children: languageChips })), stackLanguageChips && retryAction && (_jsx("div", { className: "mt-2 flex justify-start", children: retryAction }))] })] }));
+                        return (_jsxs("tr", { role: "button", tabIndex: 0, className: `group cursor-pointer transition-colors hover:bg-neutral-grey-5 ${itemIndex > 0 ? "border-t border-border-default/50" : ""}`, onClick: () => {
+                                void onOpenItem(itemId, rowOpenLanguage);
+                            }, onKeyDown: (e) => {
+                                if (e.key === "Enter" || e.key === " ") {
+                                    e.preventDefault();
+                                    void onOpenItem(itemId, rowOpenLanguage);
+                                }
+                            }, children: [!stackLanguageChips && (_jsx("td", { "aria-hidden": "true", className: "px-3 py-2 md:px-4" })), _jsx("td", { className: `py-2 align-top ${stackLanguageChips ? "pr-2 pl-2.5" : "pr-4"}`, children: itemContent }), !stackLanguageChips && (_jsx("td", { className: "py-2 pr-2 align-top", children: languageChips })), !stackLanguageChips && (_jsx("td", { className: "py-2 pr-3 align-top md:pr-4", children: retryAction }))] }, itemId));
+                    }) })] }) }));
 }
 function LanguageJobChip({ job, language, batchStartedAtUtc, onOpen, isRetrying = false, onRetry, }) {
     const [open, setOpen] = React.useState(false);
@@ -1131,16 +1438,16 @@ function LanguageJobChip({ job, language, batchStartedAtUtc, onOpen, isRetrying
                 ? "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";
+                    : "border-feedback-green bg-feedback-green-light text-feedback-green hover:border-feedback-green hover:brightness-95";
     const statusBadgeCls = jobError
-        ? "bg-feedback-red-light text-feedback-red ring-1 ring-inset ring-feedback-red"
+        ? "bg-feedback-red-light text-feedback-red"
         : jobAborted
-            ? "bg-feedback-orange-light text-feedback-orange ring-1 ring-inset ring-feedback-orange"
+            ? "bg-feedback-orange-light text-feedback-orange"
             : jobInProgress
-                ? "bg-highlight-10 text-highlight-100 ring-1 ring-inset ring-highlight-100/20"
+                ? "bg-highlight-10 text-highlight-100"
                 : 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";
+                    ? "bg-neutral-grey-5 text-neutral-grey-50"
+                    : "bg-feedback-green-light text-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;
@@ -1198,9 +1505,9 @@ function LanguageJobChip({ job, language, batchStartedAtUtc, onOpen, isRetrying
     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(Badge, { size: "sm", className: 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
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: `group inline-flex items-center gap-1.5 rounded 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(Badge, { size: "sm", className: 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: formatDateTime(claimedAt) })] })), 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: formatDateTime(timestamp) })] })), 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 &&
+                                            : 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: formatDateTime(lastHeartbeat) })] })), 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 &&
                                 (jobError || jobAborted ? (
                                 // Error/abort messages can be long and multi-line (e.g. an external
                                 // ITranslationService stack trace). Render them in a bounded,