@parhelia/localization 0.1.12808 → 0.1.12836

package/dist/translation-center/TranslationBatches.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState, useMemo } from "react";
 import React from "react";
-import { Button, Select, Input, UserPicker, Popover, PopoverContent, PopoverTrigger, ContentTree, fetchItemStubs, searchUsers as searchBackendUsers, useEditContext, getLanguages, SimpleIconButton, } from "@parhelia/core";
+import { Button, Select, Input, UserPicker, Popover, PopoverContent, PopoverTrigger, ContentTree, fetchItemStubs, searchUsers as searchBackendUsers, useEditContext, getLanguages, SimpleIconButton, DeleteIcon, } from "@parhelia/core";
 import { listBatches, getTranslationProviders, listBatchTranslationJobs, retryBatchTranslation, abortBatch, deleteBatch, } from "../services/translationService";
 import { useDebouncedCallback } from "use-debounce";
-import { X, ChevronDown, Languages, Loader2, Calendar, CheckCircle2, User as UserIcon2, Cloud, Globe, FileText, FolderTree, ExternalLink, Check, AlertCircle, CircleStop, Trash2, Hourglass, Copy, Sparkles, RotateCcw, } from "lucide-react";
+import { X, ChevronDown, Languages, Loader2, Calendar, CheckCircle2, User as UserIcon2, Cloud, Globe, FileText, FolderTree, ExternalLink, Check, AlertCircle, CircleStop, Hourglass, Copy, Sparkles, RotateCcw, } from "lucide-react";
 import { toast } from "sonner";
 // Wrappers for lucide-react icons to work with React 19
 const XIcon = (props) => React.createElement(X, props);
@@ -22,7 +22,6 @@ const ExternalLinkIcon = (props) => React.createElement(ExternalLink, props);
 const CheckIcon = (props) => React.createElement(Check, props);
 const AlertCircleIcon = (props) => React.createElement(AlertCircle, props);
 const AbortIcon = (props) => React.createElement(CircleStop, props);
-const TrashIcon = (props) => React.createElement(Trash2, props);
 const QueuedIcon = (props) => React.createElement(Hourglass, props);
 const CopyIcon = (props) => React.createElement(Copy, props);
 const SparklesIcon = (props) => React.createElement(Sparkles, props);
@@ -73,7 +72,10 @@ function buildRetryJobRequest(job) {
     };
 }
 function normalizeGuid(value) {
-    return (value ?? "").toString().replace(/[{}()]/g, "").toLowerCase();
+    return (value ?? "")
+        .toString()
+        .replace(/[{}()]/g, "")
+        .toLowerCase();
 }
 function dateRangeToFromUtc(range) {
     const now = new Date();
@@ -146,8 +148,10 @@ export function TranslationBatches() {
     });
     // Enforce current user filter for limited preview users
     useEffect(() => {
-        if (isLimitedPreviewUser && currentUserName !== "all" && filters.user !== currentUserName) {
-            setFilters(prev => ({ ...prev, user: currentUserName }));
+        if (isLimitedPreviewUser &&
+            currentUserName !== "all" &&
+            filters.user !== currentUserName) {
+            setFilters((prev) => ({ ...prev, user: currentUserName }));
         }
     }, [isLimitedPreviewUser, currentUserName, filters.user]);
     const effectiveFilters = useMemo(() => {
@@ -155,7 +159,9 @@ export function TranslationBatches() {
         const trimmedItem = filters.itemIdOrPath.trim();
         return {
             fromUtc: dateRangeToFromUtc(filters.dateRange),
-            status: filters.status === "all" ? undefined : STATUS_FILTER_TO_DB[filters.status],
+            status: filters.status === "all"
+                ? undefined
+                : STATUS_FILTER_TO_DB[filters.status],
             user: userFilter === "all" ? undefined : userFilter,
             provider: filters.provider === "all" ? undefined : filters.provider,
             targetLanguage: filters.targetLanguage === "all" ? undefined : filters.targetLanguage,
@@ -178,9 +184,11 @@ export function TranslationBatches() {
             if (myRequestId !== requestIdRef.current)
                 return;
             const maybeData = res?.data ?? res;
-            const newBatches = Array.isArray(maybeData) ? maybeData : [];
+            const newBatches = Array.isArray(maybeData)
+                ? maybeData
+                : [];
             if (append) {
-                setBatches(prev => {
+                setBatches((prev) => {
                     const map = new Map();
                     for (const b of prev)
                         map.set(b.id, b);
@@ -222,7 +230,9 @@ export function TranslationBatches() {
         const loadProviders = async () => {
             try {
                 const res = await getTranslationProviders();
-                const providerData = (res?.data ?? res ?? []);
+                const providerData = (res?.data ??
+                    res ??
+                    []);
                 setProviders(providerData);
             }
             catch (error) {
@@ -284,8 +294,7 @@ export function TranslationBatches() {
             await Promise.all(Array.from(unresolved).map(async (userName) => {
                 try {
                     const results = await searchBackendUsers(userName, 5);
-                    const exact = results.find((r) => r.userName?.toLowerCase() === userName.toLowerCase()) ??
-                        results[0];
+                    const exact = results.find((r) => r.userName?.toLowerCase() === userName.toLowerCase()) ?? results[0];
                     updates[userName] = exact?.displayName?.trim() || userName;
                 }
                 catch {
@@ -347,7 +356,7 @@ export function TranslationBatches() {
     // 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)
+        .map((l) => l.languageCode || l.name)
         .filter((code) => !!code)
         .sort(), [sitecoreLanguages]);
     // Group by date. Filtering happens server-side, so we operate on `batches` directly.
@@ -357,11 +366,14 @@ export function TranslationBatches() {
         const dedupMap = new Map();
         for (const b of batches)
             dedupMap.set(b.id, b);
-        const sorted = Array.from(dedupMap.values()).sort((a, b) => new Date(b.startedAtUtc || b.createdAtUtc || b.lastUpdatedUtc || '').getTime() -
-            new Date(a.startedAtUtc || a.createdAtUtc || a.lastUpdatedUtc || '').getTime());
-        const list = sorted.map(b => ({
+        const sorted = Array.from(dedupMap.values()).sort((a, b) => new Date(b.startedAtUtc || b.createdAtUtc || b.lastUpdatedUtc || "").getTime() -
+            new Date(a.startedAtUtc || a.createdAtUtc || a.lastUpdatedUtc || "").getTime());
+        const list = sorted.map((b) => ({
             id: b.id,
-            timestamp: b.startedAtUtc || b.createdAtUtc || b.lastUpdatedUtc || new Date().toISOString(),
+            timestamp: b.startedAtUtc ||
+                b.createdAtUtc ||
+                b.lastUpdatedUtc ||
+                new Date().toISOString(),
             info: b,
         }));
         const now = new Date();
@@ -396,16 +408,18 @@ export function TranslationBatches() {
         return dateGroups;
     }, [batches]);
     const loadBatchJobs = useCallback(async (batchId) => {
-        setLoadingJobs(prev => {
+        setLoadingJobs((prev) => {
             const next = new Set(prev);
             next.add(batchId);
             return next;
         });
         try {
             const res = await listBatchTranslationJobs(batchId);
-            const data = (res?.data ?? res ?? []);
+            const data = (res?.data ??
+                res ??
+                []);
             const jobs = Array.isArray(data) ? data : [];
-            setBatchJobs(prev => ({ ...prev, [batchId]: jobs }));
+            setBatchJobs((prev) => ({ ...prev, [batchId]: jobs }));
             return jobs;
         }
         catch (error) {
@@ -413,7 +427,7 @@ export function TranslationBatches() {
             return [];
         }
         finally {
-            setLoadingJobs(prev => {
+            setLoadingJobs((prev) => {
                 const next = new Set(prev);
                 next.delete(batchId);
                 return next;
@@ -424,7 +438,7 @@ export function TranslationBatches() {
         loadBatchJobsRef.current = loadBatchJobs;
     }, [loadBatchJobs]);
     const toggleBatch = useCallback((batchId) => {
-        setExpandedBatchId(prev => {
+        setExpandedBatchId((prev) => {
             const next = prev === batchId ? null : batchId;
             if (next && !batchJobs[next]) {
                 void loadBatchJobs(next);
@@ -434,7 +448,7 @@ export function TranslationBatches() {
         setExpandedItems(new Set());
     }, [batchJobs, loadBatchJobs]);
     const toggleItem = useCallback((key) => {
-        setExpandedItems(prev => {
+        setExpandedItems((prev) => {
             const next = new Set(prev);
             if (next.has(key))
                 next.delete(key);
@@ -450,11 +464,13 @@ export function TranslationBatches() {
             acceptLabel: "Abort",
             showCancel: true,
             accept: async () => {
-                setAbortingBatchIds(prev => new Set(prev).add(batchId));
+                setAbortingBatchIds((prev) => new Set(prev).add(batchId));
                 try {
                     const result = await abortBatch(batchId);
                     if (result.type !== "success") {
-                        toast.error(result.details || result.summary || "Failed to abort translation batch.");
+                        toast.error(result.details ||
+                            result.summary ||
+                            "Failed to abort translation batch.");
                         return;
                     }
                     toast.success("Translation batch aborted.");
@@ -464,7 +480,7 @@ export function TranslationBatches() {
                     }
                 }
                 finally {
-                    setAbortingBatchIds(prev => {
+                    setAbortingBatchIds((prev) => {
                         const next = new Set(prev);
                         next.delete(batchId);
                         return next;
@@ -472,7 +488,13 @@ export function TranslationBatches() {
                 }
             },
         });
-    }, [editContext, effectiveFilters, expandedBatchId, loadBatchJobs, loadRecentBatches]);
+    }, [
+        editContext,
+        effectiveFilters,
+        expandedBatchId,
+        loadBatchJobs,
+        loadRecentBatches,
+    ]);
     const handleDeleteBatch = useCallback((batchId) => {
         editContext?.confirm({
             header: "Delete Translation History",
@@ -480,24 +502,26 @@ export function TranslationBatches() {
             acceptLabel: "Delete",
             showCancel: true,
             accept: async () => {
-                setDeletingBatchIds(prev => new Set(prev).add(batchId));
+                setDeletingBatchIds((prev) => new Set(prev).add(batchId));
                 try {
                     const result = await deleteBatch(batchId);
                     if (result.type !== "success") {
-                        toast.error(result.details || result.summary || "Failed to delete translation batch.");
+                        toast.error(result.details ||
+                            result.summary ||
+                            "Failed to delete translation batch.");
                         return;
                     }
                     toast.success("Translation batch deleted.");
-                    setBatches(prev => prev.filter(batch => batch.id !== batchId));
-                    setBatchJobs(prev => {
+                    setBatches((prev) => prev.filter((batch) => batch.id !== batchId));
+                    setBatchJobs((prev) => {
                         const next = { ...prev };
                         delete next[batchId];
                         return next;
                     });
-                    setExpandedBatchId(prev => prev === batchId ? null : prev);
+                    setExpandedBatchId((prev) => (prev === batchId ? null : prev));
                 }
                 finally {
-                    setDeletingBatchIds(prev => {
+                    setDeletingBatchIds((prev) => {
                         const next = new Set(prev);
                         next.delete(batchId);
                         return next;
@@ -520,7 +544,7 @@ export function TranslationBatches() {
             toast.error("No failed translations are available to retry.");
             return;
         }
-        setRetryingKeys(prev => new Set(prev).add(retryKey));
+        setRetryingKeys((prev) => new Set(prev).add(retryKey));
         try {
             const result = await retryBatchTranslation({
                 sessionId,
@@ -529,7 +553,9 @@ export function TranslationBatches() {
                 jobs: retryJobs,
             });
             if (result.type !== "success") {
-                toast.error(result.details || result.summary || "Failed to retry translations.");
+                toast.error(result.details ||
+                    result.summary ||
+                    "Failed to retry translations.");
                 return;
             }
             const payload = (result?.data ?? result);
@@ -552,16 +578,23 @@ export function TranslationBatches() {
             }
         }
         finally {
-            setRetryingKeys(prev => {
+            setRetryingKeys((prev) => {
                 const next = new Set(prev);
                 next.delete(retryKey);
                 return next;
             });
         }
-    }, [batchJobs, editContext?.sessionId, effectiveFilters, expandedBatchId, loadBatchJobs, loadRecentBatches]);
+    }, [
+        batchJobs,
+        editContext?.sessionId,
+        effectiveFilters,
+        expandedBatchId,
+        loadBatchJobs,
+        loadRecentBatches,
+    ]);
     const handleRetryBatch = useCallback(async (batch) => {
         const batchId = batch.id;
-        const jobs = batchJobs[batchId] ?? await loadBatchJobs(batchId);
+        const jobs = batchJobs[batchId] ?? (await loadBatchJobs(batchId));
         await handleRetryJobs(batchId, batch.provider, jobs, `batch:${batchId}`);
     }, [batchJobs, handleRetryJobs, loadBatchJobs]);
     const openItemInEditor = useCallback(async (itemId, language) => {
@@ -577,8 +610,14 @@ export function TranslationBatches() {
         filters.provider !== "all" ||
         filters.targetLanguage !== "all" ||
         filters.itemIdOrPath.trim() !== "";
-    const filterLabelClass = "flex items-center gap-1.5 text-[10px] font-semibold uppercase tracking-[0.06em] text-(--color-gray-2)";
-    return (_jsxs("div", { className: "flex h-full flex-col min-h-0 bg-background", "data-testid": "translation-batches", children: [_jsx("div", { className: "shrink-0 px-4 pt-4 pb-3 md:px-6", children: _jsxs("div", { className: "flex flex-wrap items-end gap-x-3 gap-y-2", children: [_jsxs("div", { className: "flex min-w-[160px] flex-1 flex-col gap-1", children: [_jsxs("label", { className: filterLabelClass, children: [_jsx(CalendarIcon, { className: "h-3 w-3" }), "Date Range"] }), _jsx(Select, { className: "w-full bg-gray-5", options: DATE_RANGE_OPTIONS, value: filters.dateRange, onValueChange: (value) => setFilters((prev) => ({ ...prev, dateRange: value })), placeholder: "Select date range" })] }), _jsxs("div", { className: "flex min-w-[140px] flex-1 flex-col gap-1", children: [_jsxs("label", { className: filterLabelClass, children: [_jsx(StatusIcon, { className: "h-3 w-3" }), "Status"] }), _jsx(Select, { className: "w-full bg-gray-5", options: STATUS_OPTIONS, value: filters.status, onValueChange: (value) => setFilters((prev) => ({ ...prev, status: value })), placeholder: "Select status" })] }), _jsxs("div", { className: "flex min-w-[200px] flex-1 flex-col gap-1", children: [_jsxs("label", { className: filterLabelClass, children: [_jsx(UserFilterIcon, { className: "h-3 w-3" }), "User"] }), _jsx(UserPicker, { value: isLimitedPreviewUser
+    const filterLabelClass = "flex items-center gap-1.5 text-[10px] font-semibold tracking-[0.06em] text-neutral-grey-50";
+    return (_jsxs("div", { className: "flex h-full flex-col min-h-0 bg-background", "data-testid": "translation-batches", children: [_jsx("div", { className: "shrink-0 px-4 pt-4 pb-3 md:px-6", children: _jsxs("div", { className: "flex flex-wrap items-end gap-x-3 gap-y-2", children: [_jsxs("div", { className: "flex min-w-[160px] flex-1 flex-col gap-1", children: [_jsxs("label", { className: filterLabelClass, children: [_jsx(CalendarIcon, { className: "h-3 w-3" }), "Date Range"] }), _jsx(Select, { className: "w-full bg-neutral-grey-5", options: DATE_RANGE_OPTIONS, value: filters.dateRange, onValueChange: (value) => setFilters((prev) => ({
+                                        ...prev,
+                                        dateRange: value,
+                                    })), placeholder: "Select date range" })] }), _jsxs("div", { className: "flex min-w-[140px] flex-1 flex-col gap-1", children: [_jsxs("label", { className: filterLabelClass, children: [_jsx(StatusIcon, { className: "h-3 w-3" }), "Status"] }), _jsx(Select, { className: "w-full bg-neutral-grey-5", options: STATUS_OPTIONS, value: filters.status, onValueChange: (value) => setFilters((prev) => ({
+                                        ...prev,
+                                        status: value,
+                                    })), placeholder: "Select status" })] }), _jsxs("div", { className: "flex min-w-[200px] flex-1 flex-col gap-1", children: [_jsxs("label", { className: filterLabelClass, children: [_jsx(UserFilterIcon, { className: "h-3 w-3" }), "User"] }), _jsx(UserPicker, { value: isLimitedPreviewUser
                                         ? currentUserName
                                         : filters.user === "all"
                                             ? null
@@ -587,34 +626,44 @@ export function TranslationBatches() {
                                         : undefined, onChange: (user) => setFilters((prev) => ({
                                         ...prev,
                                         user: user?.userName ?? "all",
-                                    })), disabled: isLimitedPreviewUser, placeholder: "All Users", buttonClassName: "h-[27px] w-full justify-start rounded-md border bg-gray-5 text-xs font-medium", allowClear: true, clearLabel: "All Users", searchUsers: searchTranslationUsers })] }), _jsxs("div", { className: "flex min-w-[160px] flex-1 flex-col gap-1", children: [_jsxs("label", { className: filterLabelClass, children: [_jsx(ProviderIcon, { className: "h-3 w-3" }), "Provider"] }), _jsx(Select, { className: "w-full bg-gray-5", options: [
+                                    })), disabled: isLimitedPreviewUser, placeholder: "All Users", buttonClassName: "h-[27px] w-full justify-start rounded-md border bg-neutral-grey-5 text-xs font-medium", allowClear: true, clearLabel: "All Users", searchUsers: searchTranslationUsers })] }), _jsxs("div", { className: "flex min-w-[160px] flex-1 flex-col gap-1", children: [_jsxs("label", { className: filterLabelClass, children: [_jsx(ProviderIcon, { className: "h-3 w-3" }), "Provider"] }), _jsx(Select, { className: "w-full bg-neutral-grey-5", options: [
                                         { value: "all", label: "All Providers" },
                                         ...providers.map((p) => ({
                                             value: p.name,
                                             label: p.displayName || p.name,
                                         })),
-                                    ], value: filters.provider, onValueChange: (value) => setFilters((prev) => ({ ...prev, provider: value })), placeholder: "Select provider" })] }), _jsxs("div", { className: "flex min-w-[160px] flex-1 flex-col gap-1", children: [_jsxs("label", { className: filterLabelClass, children: [_jsx(GlobeIcon, { className: "h-3 w-3" }), "Target Language"] }), _jsx(Select, { className: "w-full bg-gray-5", options: [
+                                    ], value: filters.provider, onValueChange: (value) => setFilters((prev) => ({ ...prev, provider: value })), placeholder: "Select provider" })] }), _jsxs("div", { className: "flex min-w-[160px] flex-1 flex-col gap-1", children: [_jsxs("label", { className: filterLabelClass, children: [_jsx(GlobeIcon, { className: "h-3 w-3" }), "Target Language"] }), _jsx(Select, { className: "w-full bg-neutral-grey-5", options: [
                                         { value: "all", label: "All Languages" },
                                         ...languageOptions.map((lang) => ({
                                             value: lang,
                                             label: lang,
                                         })),
-                                    ], value: filters.targetLanguage, onValueChange: (value) => setFilters((prev) => ({ ...prev, targetLanguage: value })), placeholder: "Select language" })] }), _jsxs("div", { className: "flex min-w-[200px] flex-1 flex-col gap-1", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("label", { className: filterLabelClass, children: [_jsx(ItemIcon, { className: "h-3 w-3" }), "Item ID / Path"] }), _jsxs("label", { className: "flex items-center gap-1 text-[10px] text-(--color-gray-2) cursor-pointer select-none", children: [_jsx("input", { type: "checkbox", checked: filters.itemIncludeSubitems, onChange: (e) => setFilters((prev) => ({ ...prev, itemIncludeSubitems: e.target.checked })), className: "h-3 w-3 accent-(--color-theme-secondary) cursor-pointer" }), "Include subitems"] })] }), _jsxs("div", { className: "relative", children: [_jsx(Input, { value: itemIdOrPathInput, onChange: (e) => {
+                                    ], value: filters.targetLanguage, onValueChange: (value) => setFilters((prev) => ({ ...prev, targetLanguage: value })), placeholder: "Select language" })] }), _jsxs("div", { className: "flex min-w-[200px] flex-1 flex-col gap-1", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsxs("label", { className: filterLabelClass, children: [_jsx(ItemIcon, { className: "h-3 w-3" }), "Item ID / Path"] }), _jsxs("label", { className: "flex items-center gap-1 text-[10px] text-neutral-grey-50 cursor-pointer select-none", children: [_jsx("input", { type: "checkbox", checked: filters.itemIncludeSubitems, onChange: (e) => setFilters((prev) => ({
+                                                        ...prev,
+                                                        itemIncludeSubitems: e.target.checked,
+                                                    })), className: "h-3 w-3 accent-highlight-100 cursor-pointer" }), "Include subitems"] })] }), _jsxs("div", { className: "relative", children: [_jsx(Input, { value: itemIdOrPathInput, onChange: (e) => {
                                                 const next = e.target.value;
                                                 setItemIdOrPathInput(next);
                                                 debouncedSetItemFilter(next);
-                                            }, placeholder: "GUID or /sitecore/content/\u2026", className: "h-[27px] w-full bg-gray-5 text-xs pr-14" }), _jsxs("div", { className: "absolute right-1.5 top-1/2 -translate-y-1/2 flex items-center gap-1", children: [itemIdOrPathInput && (_jsx("button", { type: "button", onClick: () => {
+                                            }, placeholder: "GUID or /sitecore/content/\u2026", className: "h-[27px] w-full bg-neutral-grey-5 text-xs pr-14" }), _jsxs("div", { className: "absolute right-1.5 top-1/2 -translate-y-1/2 flex items-center gap-1", children: [itemIdOrPathInput && (_jsx("button", { type: "button", onClick: () => {
                                                         setItemIdOrPathInput("");
                                                         debouncedSetItemFilter.cancel();
-                                                        setFilters((prev) => ({ ...prev, itemIdOrPath: "", itemIncludeSubitems: false }));
-                                                    }, className: "text-gray-2 hover:text-(--color-dark) cursor-pointer", "aria-label": "Clear", children: _jsx(XIcon, { className: "h-3.5 w-3.5" }) })), _jsxs(Popover, { open: itemPickerOpen, onOpenChange: setItemPickerOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "text-gray-2 hover:text-(--color-dark) cursor-pointer", "aria-label": "Browse content tree", title: "Browse content tree", children: _jsx(FolderTreeIcon, { className: "h-3.5 w-3.5" }) }) }), _jsxs(PopoverContent, { align: "end", sideOffset: 6, className: "w-[28rem] max-w-[calc(100vw-2rem)] p-0", children: [_jsx("div", { className: "flex items-center justify-between gap-2 border-b border-gray-3 px-3 py-2 text-[11px] text-gray-2", children: _jsx("span", { children: "Pick item to filter by" }) }), _jsx("div", { className: "max-h-80 overflow-auto p-2", children: _jsx(ContentTree, { language: "en", selectionMode: "single", rootItemIds: ["0de95ae4-41ab-4d01-9eb0-67441b7c2450"], onSelectionChange: (items) => {
+                                                        setFilters((prev) => ({
+                                                            ...prev,
+                                                            itemIdOrPath: "",
+                                                            itemIncludeSubitems: false,
+                                                        }));
+                                                    }, className: "text-neutral-grey-50 hover:text-neutral-grey-100 cursor-pointer", "aria-label": "Clear", children: _jsx(XIcon, { className: "h-3.5 w-3.5" }) })), _jsxs(Popover, { open: itemPickerOpen, onOpenChange: setItemPickerOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "text-neutral-grey-50 hover:text-neutral-grey-100 cursor-pointer", "aria-label": "Browse content tree", title: "Browse content tree", children: _jsx(FolderTreeIcon, { className: "h-3.5 w-3.5" }) }) }), _jsxs(PopoverContent, { align: "end", sideOffset: 6, className: "w-[28rem] max-w-[calc(100vw-2rem)] p-0", children: [_jsx("div", { className: "flex items-center justify-between gap-2 border-b border-border-default px-3 py-2 text-[11px] text-neutral-grey-50", children: _jsx("span", { children: "Pick item to filter by" }) }), _jsx("div", { className: "max-h-80 overflow-auto p-2", children: _jsx(ContentTree, { language: "en", selectionMode: "single", rootItemIds: ["0de95ae4-41ab-4d01-9eb0-67441b7c2450"], onSelectionChange: (items) => {
                                                                             const picked = items?.[0];
                                                                             if (!picked)
                                                                                 return;
                                                                             const applyValue = (value) => {
                                                                                 setItemIdOrPathInput(value);
                                                                                 debouncedSetItemFilter.cancel();
-                                                                                setFilters((prev) => ({ ...prev, itemIdOrPath: value }));
+                                                                                setFilters((prev) => ({
+                                                                                    ...prev,
+                                                                                    itemIdOrPath: value,
+                                                                                }));
                                                                                 setItemPickerOpen(false);
                                                                             };
                                                                             if (picked.path) {
@@ -623,13 +672,15 @@ export function TranslationBatches() {
                                                                             }
                                                                             // 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 }])
+                                                                            fetchItemStubs([
+                                                                                { id: picked.id, language: "en", version: 1 },
+                                                                            ])
                                                                                 .then((stubs) => {
                                                                                 const stubPath = stubs?.[0]?.path;
                                                                                 applyValue(stubPath || picked.id);
                                                                             })
                                                                                 .catch(() => applyValue(picked.id));
-                                                                        } }) })] })] })] })] })] })] }) }), _jsx("div", { className: "flex-1 overflow-auto p-4 md:p-6 min-h-0", children: isLoading && batches.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-32", children: _jsxs("div", { className: "flex items-center gap-2 text-gray-2", children: [_jsx(LoaderIcon, { className: "h-5 w-5 animate-spin text-theme-secondary" }), "Loading recent translations..."] }) })) : groupedBatches.length === 0 ? (_jsx("div", { className: "flex items-center justify-center h-32", children: _jsxs("div", { className: "text-center text-gray-2", children: [_jsx(LanguagesIcon, { className: "h-8 w-8 block mx-auto mb-2 text-gray-3" }), _jsx("p", { className: "font-medium text-(--color-gray-1)", children: "No translations found" }), _jsx("p", { className: "text-sm mt-1", children: (() => {
+                                                                        } }) })] })] })] })] })] })] }) }), _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 ||
@@ -639,45 +690,53 @@ export function TranslationBatches() {
                                     return hasActiveFilters
                                         ? "Try adjusting your filters or start a translation to see it appear here"
                                         : "Start a translation to see it appear here";
-                                })() })] }) })) : (_jsxs("div", { className: "space-y-10", children: [groupedBatches.map((dateGroup) => (_jsxs("div", { children: [_jsxs("div", { className: "flex items-baseline gap-2 mb-2", children: [_jsx("h2", { className: "text-[11px] font-semibold uppercase tracking-[0.08em] text-(--color-gray-2)", children: dateGroup.label }), _jsx("span", { className: "flex-1 ml-2 border-t border-gray-3" })] }), _jsx("div", { className: "divide-y divide-gray-3/70", children: dateGroup.batches.map((b) => {
+                                })() })] }) })) : (_jsxs("div", { className: "space-y-10", children: [groupedBatches.map((dateGroup) => (_jsxs("div", { children: [_jsxs("div", { className: "flex items-baseline gap-2 mb-2", children: [_jsx("h2", { className: "text-[11px] font-semibold 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();
+                                            : batchDate.toLocaleDateString() +
+                                                " " +
+                                                batchDate.toLocaleTimeString();
                                         const info = b.info;
                                         const totalJobs = info?.expectedJobs ?? 0;
-                                        const itemsCount = typeof info?.itemsCount === 'number' ? info.itemsCount : undefined;
+                                        const itemsCount = typeof info?.itemsCount === "number"
+                                            ? info.itemsCount
+                                            : undefined;
                                         const languagesCsv = info?.languages;
-                                        const languages = languagesCsv ? languagesCsv.split(',') : [];
+                                        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 progressPct = totalJobs > 0
+                                            ? Math.min(100, Math.round((completedJobs / totalJobs) * 100))
+                                            : 0;
                                         const showProgress = totalJobs > 0 && (anyInProgress || anyError);
                                         const statusDotClass = anyError
-                                            ? "bg-red-400"
+                                            ? "bg-feedback-red"
                                             : anyInProgress
-                                                ? "bg-(--color-theme-secondary)"
+                                                ? "bg-highlight-100"
                                                 : anyAborted
-                                                    ? "bg-amber-400"
-                                                    : "bg-emerald-400/70";
+                                                    ? "bg-feedback-orange"
+                                                    : "bg-feedback-green/70";
                                         const metaParts = [];
-                                        metaParts.push(_jsxs("span", { className: "text-(--color-gray-1)", children: [totalJobs, " translation", totalJobs !== 1 ? 's' : ''] }, "trans"));
-                                        if (typeof itemsCount === 'number') {
-                                            metaParts.push(_jsxs("span", { children: [itemsCount, " item", itemsCount !== 1 ? 's' : ''] }, "items"));
+                                        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"));
+                                            metaParts.push(_jsxs("span", { title: languages.join(", "), children: [languages.length, " language", languages.length !== 1 ? "s" : ""] }, "langs"));
                                         }
                                         if (info?.provider) {
                                             metaParts.push(_jsx("span", { children: info.provider }, "prov"));
                                         }
                                         if (info?.totalCost != null) {
-                                            metaParts.push(_jsxs("span", { children: ["Cost: ", _jsx("span", { className: "font-medium text-(--color-gray-1)", children: formatUsdCost(info.totalCost) })] }, "cost"));
+                                            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];
@@ -701,12 +760,12 @@ export function TranslationBatches() {
                                                 : anyAborted
                                                     ? "aborted"
                                                     : "completed";
-                                        return (_jsxs("div", { "data-testid": `batch-row-${b.id}`, "data-batch-status": testStatus, children: [_jsx("div", { role: "button", tabIndex: 0, className: "group w-full text-left px-3 md:px-4 py-3 hover:bg-gray-5 transition-colors cursor-pointer", onClick: () => toggleBatch(b.id), onKeyDown: (e) => {
+                                        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-theme-secondary" })) : (_jsx("span", { className: `h-1.5 w-1.5 shrink-0 rounded-full ${statusDotClass}`, "aria-hidden": "true" })), _jsx("span", { className: "text-(--color-dark-lighter) truncate", title: timeDisplay, children: (() => {
+                                                    }, 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 {
@@ -714,7 +773,8 @@ export function TranslationBatches() {
                                                                                                 ? JSON.parse(info.metadata)
                                                                                                 : info.metadata;
                                                                                             const candidate = m?.name;
-                                                                                            if (typeof candidate === "string" && candidate.trim()) {
+                                                                                            if (typeof candidate === "string" &&
+                                                                                                candidate.trim()) {
                                                                                                 parsedName = candidate.trim();
                                                                                             }
                                                                                         }
@@ -722,18 +782,22 @@ export function TranslationBatches() {
                                                                                             // Metadata isn't JSON — fall through to timestamp.
                                                                                         }
                                                                                     }
-                                                                                    return parsedName ?? `Translation Batch · ${timeDisplay}`;
-                                                                                })() }), showProgress && (_jsxs("span", { className: `inline-flex items-center gap-1 text-[11px] tabular-nums ${anyError ? 'text-red-600' : 'text-theme-secondary'}`, "data-testid": `batch-progress-${b.id}`, children: [completedJobs, "/", totalJobs, anyError && _jsxs("span", { className: "text-red-600", children: ["\u00B7 ", errorJobs, " error", errorJobs !== 1 ? 's' : ''] })] }))] }), _jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-[12px] text-gray-2 pl-4", children: [metaParts.map((part, i) => (_jsxs(React.Fragment, { children: [i > 0 && _jsx("span", { className: "text-gray-3", children: "\u00B7" }), part] }, i))), info?.lastUpdatedUtc && (_jsxs(_Fragment, { children: [_jsx("span", { className: "text-gray-3", children: "\u00B7" }), _jsx("span", { children: new Date(info.lastUpdatedUtc).toLocaleString() })] }))] })] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [canRetry && (_jsx(SimpleIconButton, { onClick: (event) => {
+                                                                                    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-red-600 hover:text-red-700" })), canAbort && (_jsx(SimpleIconButton, { onClick: (event) => {
+                                                                        }, 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-amber-600 hover:text-amber-700" })), canDelete && (_jsx(SimpleIconButton, { onClick: (event) => {
+                                                                        }, 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(TrashIcon, { className: "h-3.5 w-3.5", strokeWidth: 1.5 }), label: "Delete translation history", disabled: isDeleting || isAborting, className: "p-0! text-red-500 hover:text-red-600" })), _jsx("div", { className: `text-gray-3 transition-transform ${isExpanded ? 'rotate-180' : ''} group-hover:text-(--color-gray-2)`, children: _jsx(ChevronDownIcon, { className: "h-4 w-4" }) })] })] }) }), isExpanded && (_jsxs(_Fragment, { children: [_jsx(CustomPromptPanel, { prompts: parseCustomPrompts(info?.metadata) }), _jsx(BatchItemList, { 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-theme-secondary" }), "Loading more..."] })) : (_jsxs(_Fragment, { children: [_jsx(ChevronDownIcon, { className: "h-4 w-4" }), "Load More Batches"] })) }) }))] })) })] }));
+                                                                        }, icon: _jsx(DeleteIcon, { size: "md" }), label: "Delete translation history", disabled: isDeleting || isAborting, className: "p-0! text-neutral-grey-50 hover:bg-neutral-grey-5 hover:text-neutral-grey-50" })), _jsx("div", { className: `text-neutral-grey-15 transition-transform ${isExpanded ? "rotate-180" : ""} group-hover:text-neutral-grey-50`, children: _jsx(ChevronDownIcon, { className: "h-4 w-4" }) })] })] }) }), isExpanded && (_jsxs(_Fragment, { children: [_jsx(CustomPromptPanel, { prompts: parseCustomPrompts(info?.metadata) }), _jsx(BatchItemList, { batchId: b.id, batchProvider: info?.provider, jobs: jobs, isLoading: isLoadingThis, expandedItems: expandedItems, languages: sitecoreLanguages, itemFilter: filters.itemIdOrPath.trim(), itemIncludeSubitems: filters.itemIncludeSubitems, statusFilter: filters.status, batchIsTerminal: isTerminalBatchStatus(info?.status), batchStartedAtUtc: info?.startedAtUtc ?? info?.createdAtUtc, retryingKeys: retryingKeys, onToggleItem: toggleItem, onOpenItem: openItemInEditor, onRetryJobs: handleRetryJobs })] }))] }, b.id));
+                                    }) })] }, dateGroup.label))), hasMore && (_jsx("div", { className: "flex justify-center pt-6", children: _jsx(Button, { variant: "outline", size: "sm", onClick: loadMore, disabled: isLoadingMore, children: isLoadingMore ? (_jsxs(_Fragment, { children: [_jsx(LoaderIcon, { className: "h-4 w-4 animate-spin text-highlight-100" }), "Loading more..."] })) : (_jsxs(_Fragment, { children: [_jsx(ChevronDownIcon, { className: "h-4 w-4" }), "Load More Batches"] })) }) }))] })) })] }));
 }
 function isLikelyGuid(value) {
     return /^[{(]?[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}[)}]?$/i.test(value.trim());
@@ -785,7 +849,9 @@ function parseTranslationStatistics(metadata) {
         const fieldCount = Number(stats.fieldCount);
         const nonEmptyFieldCount = Number(stats.nonEmptyFieldCount ?? stats.translatedFieldCount ?? fieldCount);
         const emptyFieldCount = Number(stats.emptyFieldCount ?? Math.max(0, fieldCount - nonEmptyFieldCount));
-        const sourceCharacterCount = Number(stats.sourceCharacterCount ?? stats.textCharacterCount ?? stats.characterCount);
+        const sourceCharacterCount = Number(stats.sourceCharacterCount ??
+            stats.textCharacterCount ??
+            stats.characterCount);
         if (!Number.isFinite(fieldCount) ||
             !Number.isFinite(nonEmptyFieldCount) ||
             !Number.isFinite(emptyFieldCount) ||
@@ -815,19 +881,19 @@ function formatUsdCost(value) {
     }).format(value);
 }
 function itemStatusDot(jobs) {
-    const hasError = jobs.some(j => j.status === "Error");
-    const hasInProgress = jobs.some(j => j.status === "In Progress");
-    const hasPending = jobs.some(j => j.status === "Pending");
-    const hasAborted = jobs.some(j => j.status === "Aborted");
+    const hasError = jobs.some((j) => j.status === "Error");
+    const hasInProgress = jobs.some((j) => j.status === "In Progress");
+    const hasPending = jobs.some((j) => j.status === "Pending");
+    const hasAborted = jobs.some((j) => j.status === "Aborted");
     if (hasError)
-        return { cls: "bg-red-400", label: "Has errors" };
+        return { cls: "bg-feedback-red", label: "Has errors" };
     if (hasInProgress)
-        return { cls: "bg-(--color-theme-secondary)", label: "In progress" };
+        return { cls: "bg-highlight-100", label: "In progress" };
     if (hasPending)
-        return { cls: "bg-gray-3", label: "Queued" };
+        return { cls: "bg-neutral-grey-15", label: "Queued" };
     if (hasAborted)
-        return { cls: "bg-amber-400", label: "Aborted" };
-    return { cls: "bg-emerald-400/70", label: "Completed" };
+        return { cls: "bg-feedback-orange", label: "Aborted" };
+    return { cls: "bg-feedback-green/70", label: "Completed" };
 }
 function CustomPromptPanel({ prompts }) {
     const [openProvider, setOpenProvider] = React.useState(null);
@@ -853,21 +919,21 @@ function CustomPromptPanel({ prompts }) {
             toast.error("Failed to copy prompt to clipboard");
         }
     };
-    return (_jsx("div", { className: "bg-gray-5/60 border-t border-gray-3/50", children: prompts.map((p) => {
+    return (_jsx("div", { className: "bg-neutral-grey-5/60 border-t border-border-default/50", children: prompts.map((p) => {
             const isOpen = openProvider === p.provider;
             const justCopied = copiedProvider === p.provider;
-            return (_jsxs("div", { children: [_jsxs("div", { role: "button", tabIndex: 0, style: { paddingLeft: "2rem" }, className: "group flex items-center gap-2 pr-3 md:pr-4 py-2 text-[12px] text-gray-2 hover:bg-gray-5 transition-colors cursor-pointer", onClick: () => setOpenProvider(isOpen ? null : p.provider), onKeyDown: (e) => {
+            return (_jsxs("div", { children: [_jsxs("div", { role: "button", tabIndex: 0, style: { paddingLeft: "2rem" }, className: "group flex items-center gap-2 pr-3 md:pr-4 py-2 text-[12px] text-neutral-grey-50 hover:bg-neutral-grey-5 transition-colors cursor-pointer", onClick: () => setOpenProvider(isOpen ? null : p.provider), onKeyDown: (e) => {
                             if (e.key === "Enter" || e.key === " ") {
                                 e.preventDefault();
                                 setOpenProvider(isOpen ? null : p.provider);
                             }
-                        }, children: [_jsx(SparklesIcon, { className: "h-3 w-3 shrink-0 text-(--color-theme-secondary)", strokeWidth: 1.75 }), _jsx("span", { className: "text-(--color-dark-lighter)", children: "Custom prompt" }), _jsx("span", { className: "text-gray-3", children: "\u00B7" }), _jsx("span", { children: p.provider }), _jsxs("span", { className: "ml-auto flex items-center gap-2", children: [isOpen && (_jsx(SimpleIconButton, { onClick: (event) => {
+                        }, 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-gray-2 hover:text-(--color-dark-lighter)" })), _jsx(ChevronDownIcon, { className: `h-3.5 w-3.5 text-gray-3 transition-transform group-hover:text-(--color-gray-2) ${isOpen ? "rotate-180" : ""}` })] })] }), isOpen && (_jsx("div", { style: { paddingLeft: "2.5rem" }, className: "pr-3 md:pr-4 pb-3", children: _jsx("pre", { className: "max-h-64 overflow-y-auto whitespace-pre-wrap break-words rounded border border-gray-3/50 bg-white p-2 font-mono text-[12px] text-(--color-dark-lighter)", children: p.prompt }) }))] }, p.provider));
+                                        }, icon: justCopied ? (_jsx(CheckIcon, { className: "h-3.5 w-3.5", strokeWidth: 1.5 })) : (_jsx(CopyIcon, { className: "h-3.5 w-3.5", strokeWidth: 1.5 })), label: justCopied ? "Copied" : "Copy prompt", className: "p-0! text-neutral-grey-50 hover:text-neutral-grey-100" })), _jsx(ChevronDownIcon, { className: `h-3.5 w-3.5 text-neutral-grey-15 transition-transform group-hover:text-neutral-grey-50 ${isOpen ? "rotate-180" : ""}` })] })] }), isOpen && (_jsx("div", { style: { paddingLeft: "2.5rem" }, className: "pr-3 md:pr-4 pb-3", children: _jsx("pre", { className: "max-h-64 overflow-y-auto whitespace-pre-wrap break-words rounded border border-border-default/50 bg-white p-2 font-mono text-[12px] text-neutral-grey-100", children: p.prompt }) }))] }, p.provider));
         }) }));
 }
-function BatchItemList({ batchId, batchProvider, jobs, isLoading, expandedItems, languages, itemFilter, itemIncludeSubitems, statusFilter, batchIsTerminal, batchStartedAtUtc, retryingKeys, onToggleItem, onOpenItem, onRetryJobs }) {
+function BatchItemList({ batchId, batchProvider, jobs, isLoading, expandedItems, languages, itemFilter, itemIncludeSubitems, statusFilter, batchIsTerminal, batchStartedAtUtc, retryingKeys, onToggleItem, onOpenItem, onRetryJobs, }) {
     const languageMap = React.useMemo(() => {
         const map = new Map();
         for (const l of languages) {
@@ -907,11 +973,11 @@ function BatchItemList({ batchId, batchProvider, jobs, isLoading, expandedItems,
         if (isLikelyGuid(filter)) {
             const normalized = normalizeGuid(filter);
             if (itemIncludeSubitems) {
-                const rootJob = effectiveJobs.find(j => normalizeGuid((j.itemId || "").toString()) === normalized);
+                const rootJob = effectiveJobs.find((j) => normalizeGuid((j.itemId || "").toString()) === normalized);
                 pathPrefix = rootJob?.itemPath ? rootJob.itemPath.toLowerCase() : null;
             }
             if (!pathPrefix) {
-                return effectiveJobs.filter(j => normalizeGuid((j.itemId || "").toString()) === normalized);
+                return effectiveJobs.filter((j) => normalizeGuid((j.itemId || "").toString()) === normalized);
             }
         }
         else if (filter.startsWith("/")) {
@@ -923,12 +989,12 @@ function BatchItemList({ batchId, batchProvider, jobs, isLoading, expandedItems,
         if (itemIncludeSubitems) {
             const prefix = pathPrefix;
             const prefixSlash = prefix.endsWith("/") ? prefix : prefix + "/";
-            return effectiveJobs.filter(j => {
+            return effectiveJobs.filter((j) => {
                 const p = (j.itemPath || "").toLowerCase();
                 return p === prefix || p.startsWith(prefixSlash);
             });
         }
-        return effectiveJobs.filter(j => (j.itemPath || "").toLowerCase() === pathPrefix);
+        return effectiveJobs.filter((j) => (j.itemPath || "").toLowerCase() === pathPrefix);
     }, [effectiveJobs, itemFilter, itemIncludeSubitems]);
     // Keep all jobs of items that have at least one job matching the selected status —
     // this way the per-item language overview stays intact even when filtering.
@@ -946,15 +1012,15 @@ function BatchItemList({ batchId, batchProvider, jobs, isLoading, expandedItems,
         }
         if (matchingItemIds.size === 0)
             return [];
-        return filteredJobs.filter(j => matchingItemIds.has((j.itemId || "").toString().toLowerCase()));
+        return filteredJobs.filter((j) => matchingItemIds.has((j.itemId || "").toString().toLowerCase()));
     }, [filteredJobs, statusFilter]);
     if (isLoading && !jobs) {
-        return (_jsxs("div", { className: "px-3 md:px-4 py-4 pl-8 text-[12px] text-gray-2", children: [_jsx(LoaderIcon, { className: "inline h-3.5 w-3.5 mr-1.5 animate-spin text-theme-secondary" }), "Loading items\u2026"] }));
+        return (_jsxs("div", { className: "px-3 md:px-4 py-4 pl-8 text-[12px] text-neutral-grey-50", children: [_jsx(LoaderIcon, { className: "inline h-3.5 w-3.5 mr-1.5 animate-spin text-highlight-100" }), "Loading items\u2026"] }));
     }
     if (!statusFilteredJobs || statusFilteredJobs.length === 0) {
         const hasItemFilter = itemFilter.trim() !== "";
         const hasStatusFilter = statusFilter !== "all";
-        return (_jsx("div", { className: "px-3 md:px-4 py-3 pl-8 text-[12px] text-gray-2", children: hasItemFilter || hasStatusFilter
+        return (_jsx("div", { className: "px-3 md:px-4 py-3 pl-8 text-[12px] text-neutral-grey-50", children: hasItemFilter || hasStatusFilter
                 ? "No items match the current filter."
                 : "No items in this batch." }));
     }
@@ -965,10 +1031,10 @@ function BatchItemList({ batchId, batchProvider, jobs, isLoading, expandedItems,
             byItem.set(key, []);
         byItem.get(key).push(job);
     }
-    return (_jsx("div", { className: "bg-gray-5/60 divide-y divide-gray-3/50 border-t border-gray-3/50", children: Array.from(byItem.entries()).map(([itemId, itemJobs]) => {
+    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 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];
@@ -976,28 +1042,28 @@ function BatchItemList({ batchId, batchProvider, jobs, isLoading, expandedItems,
             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 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-gray-5 transition-colors cursor-pointer text-left", onClick: () => onToggleItem(itemId), onKeyDown: (e) => {
+            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-theme-secondary" })) : itemIsQueued ? (_jsx(QueuedIcon, { className: "h-3 w-3 text-gray-2", strokeWidth: 1.75, "aria-label": "Queued" })) : (_jsx("span", { className: `block h-1.5 w-1.5 rounded-full ${status.cls}`, "aria-hidden": "true" })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [_jsx("span", { className: "text-[13px] text-(--color-dark-lighter) truncate", title: titleAttr, children: displayName }), _jsxs("span", { className: "text-[11px] text-gray-2 shrink-0", children: ["\u00B7 ", uniqueLangs.length, " language", uniqueLangs.length !== 1 ? 's' : ''] })] }), itemPath && (_jsx("div", { className: "text-[11px] text-gray-2 truncate font-mono", title: titleAttr, children: itemPath }))] }), itemErrorJobs.length > 0 && (_jsx(SimpleIconButton, { onClick: (event) => {
+                        }, 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-red-600 hover:text-red-700" })), _jsx("span", { className: "mt-1 shrink-0 text-gray-3 group-hover:text-(--color-gray-2)", children: _jsx(ChevronDownIcon, { className: `h-3.5 w-3.5 transition-transform ${isItemExpanded ? 'rotate-180' : ''}` }) })] }) }), isItemExpanded && (_jsx("div", { style: { paddingLeft: "4rem" }, className: "pr-3 md:pr-4 pb-3 pt-1 flex flex-wrap gap-1.5", children: itemJobs.map((job, idx) => {
+                                    }, icon: _jsx(RetryIcon, { className: `h-3.5 w-3.5 ${isRetryingItem ? "animate-spin" : ""}`, strokeWidth: 1.5 }), label: "Retry failed translations for this item", disabled: isRetryingItem, className: "mt-0.5 p-0! text-feedback-red hover:text-feedback-red" })), _jsx("span", { className: "mt-1 shrink-0 text-neutral-grey-15 group-hover:text-neutral-grey-50", children: _jsx(ChevronDownIcon, { className: `h-3.5 w-3.5 transition-transform ${isItemExpanded ? "rotate-180" : ""}` }) })] }) }), isItemExpanded && (_jsx("div", { style: { paddingLeft: "4rem" }, className: "pr-3 md:pr-4 pb-3 pt-1 flex flex-wrap gap-1.5", children: itemJobs.map((job, idx) => {
                             const lang = languageMap.get((job.targetLanguage || "").toLowerCase());
                             const retryKey = `job:${job.id ?? `${job.itemId}:${job.sourceLanguage}:${job.targetLanguage}`}`;
                             return (_jsx(LanguageJobChip, { job: job, language: lang, batchStartedAtUtc: batchStartedAtUtc, onOpen: () => onOpenItem(job.itemId, job.targetLanguage), isRetrying: retryingKeys.has(retryKey), onRetry: () => onRetryJobs(batchId, batchProvider, [job], retryKey) }, `${job.id ?? idx}-${job.targetLanguage}`));
                         }) }))] }, itemId));
         }) }));
 }
-function LanguageJobChip({ job, language, batchStartedAtUtc, onOpen, isRetrying = false, onRetry }) {
+function LanguageJobChip({ job, language, batchStartedAtUtc, onOpen, isRetrying = false, onRetry, }) {
     const [open, setOpen] = React.useState(false);
     const jobStatus = job.status;
     const jobInProgress = jobStatus === "In Progress";
@@ -1006,28 +1072,30 @@ function LanguageJobChip({ job, language, batchStartedAtUtc, onOpen, isRetrying
     const jobAborted = jobStatus === "Aborted";
     const langName = language?.name || job.targetLanguage;
     const chipCls = jobError
-        ? "border-red-200 bg-red-50 text-red-700 hover:bg-red-100"
+        ? "border-feedback-red bg-feedback-red-light text-feedback-red hover:bg-feedback-red-light"
         : jobAborted
-            ? "border-amber-200 bg-amber-50 text-amber-700 hover:bg-amber-100"
+            ? "border-feedback-orange bg-feedback-orange-light text-feedback-orange hover:bg-feedback-orange-light"
             : jobInProgress
-                ? "border-(--color-theme-secondary)/30 bg-theme-secondary-light text-theme-secondary hover:brightness-95"
+                ? "border-highlight-100/30 bg-highlight-10 text-highlight-100 hover:brightness-95"
                 : jobPending
-                    ? "border-gray-3 bg-gray-5 text-gray-2 hover:bg-gray-4"
-                    : "border-gray-3 bg-background text-(--color-gray-1) hover:bg-gray-5";
+                    ? "border-border-default bg-neutral-grey-5 text-neutral-grey-50 hover:bg-neutral-grey-5"
+                    : "border-border-default bg-background text-neutral-grey-100 hover:bg-neutral-grey-5";
     const statusBadgeCls = jobError
-        ? "bg-red-50 text-red-700 ring-1 ring-inset ring-red-200"
+        ? "bg-feedback-red-light text-feedback-red ring-1 ring-inset ring-feedback-red"
         : jobAborted
-            ? "bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-200"
+            ? "bg-feedback-orange-light text-feedback-orange ring-1 ring-inset ring-feedback-orange"
             : jobInProgress
-                ? "bg-theme-secondary-light text-theme-secondary ring-1 ring-inset ring-(--color-theme-secondary)/20"
+                ? "bg-highlight-10 text-highlight-100 ring-1 ring-inset ring-highlight-100/20"
                 : jobPending
-                    ? "bg-gray-4 text-gray-2 ring-1 ring-inset ring-gray-3"
-                    : "bg-emerald-50 text-emerald-700 ring-1 ring-inset ring-emerald-200";
+                    ? "bg-neutral-grey-5 text-neutral-grey-50 ring-1 ring-inset ring-border-default"
+                    : "bg-feedback-green-light text-feedback-green ring-1 ring-inset ring-feedback-green";
     const timestamp = job.timestamp ? new Date(job.timestamp) : null;
     const timestampValid = timestamp && !isNaN(timestamp.getTime());
     const claimedAt = job.claimedAtUtc ? new Date(job.claimedAtUtc) : null;
     const claimedAtValid = !!(claimedAt && !isNaN(claimedAt.getTime()));
-    const lastHeartbeat = job.lastHeartbeatUtc ? new Date(job.lastHeartbeatUtc) : null;
+    const lastHeartbeat = job.lastHeartbeatUtc
+        ? new Date(job.lastHeartbeatUtc)
+        : null;
     const lastHeartbeatValid = !!(lastHeartbeat && !isNaN(lastHeartbeat.getTime()));
     // Fall back to the batch's start time when the job didn't record one of its
     // own — older jobs (and provider-less paths) skip ClaimedAtUtc.
@@ -1046,7 +1114,9 @@ function LanguageJobChip({ job, language, batchStartedAtUtc, onOpen, isRetrying
             return null;
         const end = jobInProgress || jobPending
             ? Date.now()
-            : (timestampValid ? timestamp.getTime() : null);
+            : timestampValid
+                ? timestamp.getTime()
+                : null;
         if (end == null)
             return null;
         const ms = end - startMs;
@@ -1076,7 +1146,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 px-2 py-0.5 text-[12px] transition-colors cursor-pointer ${chipCls}`, children: [language?.icon ? (_jsx("img", { src: language.icon, alt: langName, className: "h-3.5 shrink-0" })) : null, _jsx("span", { className: "font-mono tracking-tight", children: job.targetLanguage }), jobInProgress && (_jsx(LoaderIcon, { className: "h-3 w-3 shrink-0 animate-spin" })), jobPending && (_jsx(QueuedIcon, { className: "h-3 w-3 shrink-0", strokeWidth: 1.75, "aria-label": "Queued" })), jobError && (_jsx(AlertCircleIcon, { className: "h-3 w-3 shrink-0" })), !jobInProgress && !jobError && !jobPending && !jobAborted && (_jsx(CheckIcon, { className: "h-3 w-3 shrink-0 text-emerald-600" }))] }) }), _jsxs(PopoverContent, { align: "start", sideOffset: 6, className: "w-[22rem] max-w-[calc(100vw-2rem)] p-0", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-gray-3 px-3 py-2", children: [language?.icon ? (_jsx("img", { src: language.icon, alt: langName, className: "h-4 shrink-0" })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-[13px] font-medium text-(--color-dark-lighter) truncate", children: langName }), _jsxs("div", { className: "text-[11px] text-gray-2 font-mono truncate", children: [job.targetLanguage, job.sourceLanguage ? ` ← ${job.sourceLanguage}` : ""] })] }), _jsxs("span", { className: `inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide ${statusBadgeCls}`, children: [jobInProgress && _jsx(LoaderIcon, { className: "h-2.5 w-2.5 animate-spin" }), jobStatus || "Unknown"] })] }), _jsxs("dl", { className: "divide-y divide-gray-3/60", children: [claimedAtValid && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] uppercase tracking-wide text-gray-2", children: "Claimed" }), _jsx("dd", { className: "text-[12px] text-(--color-gray-1)", children: claimedAt.toLocaleString() })] })), timestampValid && (jobInProgress || jobPending) && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] uppercase tracking-wide text-gray-2", children: "Updated" }), _jsx("dd", { className: "text-[12px] text-(--color-gray-1)", children: timestamp.toLocaleString() })] })), durationMs != null && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] uppercase tracking-wide text-gray-2", children: jobInProgress || jobPending ? "Running" : "Duration" }), _jsxs("dd", { className: "text-[12px] tabular-nums text-(--color-gray-1)", title: durationApproximated ? "Approximate — measured from batch start" : undefined, children: [durationApproximated ? "~" : "", formatDuration(durationMs)] })] })), statistics && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] uppercase tracking-wide text-gray-2", children: "Fields" }), _jsxs("dd", { className: "text-[12px] tabular-nums text-(--color-gray-1)", children: [fieldText, emptyFieldText ? _jsxs("span", { className: "ml-1.5 text-gray-2", children: ["(", emptyFieldText, ")"] }) : null] })] })), statistics && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] uppercase tracking-wide text-gray-2", children: "Text" }), _jsxs("dd", { className: "text-[12px] tabular-nums text-(--color-gray-1)", children: [formatCount(statistics.sourceCharacterCount), " chars"] })] })), job.totalCost != null && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] uppercase tracking-wide text-gray-2", children: "Cost" }), _jsx("dd", { className: "text-[12px] tabular-nums text-(--color-gray-1)", children: formatUsdCost(job.totalCost) })] })), lastHeartbeatValid && (jobInProgress || jobPending) && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] uppercase tracking-wide text-gray-2", children: "Heartbeat" }), _jsx("dd", { className: "text-[12px] text-(--color-gray-1)", children: lastHeartbeat.toLocaleString() })] })), attemptCount > 1 && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] uppercase tracking-wide text-gray-2", children: "Attempts" }), _jsx("dd", { className: "text-[12px] tabular-nums text-(--color-gray-1)", children: attemptCount })] })), job.hash && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] uppercase tracking-wide text-gray-2", children: "Hash" }), _jsx("dd", { className: "text-[11px] font-mono text-(--color-gray-1) break-all", children: job.hash })] })), job.message && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] uppercase tracking-wide text-gray-2", children: jobError ? "Error" : jobAborted ? "Aborted" : "Message" }), _jsx("dd", { className: `text-[12px] break-words ${jobError ? "text-red-600" : jobAborted ? "text-amber-700" : "text-(--color-gray-1)"}`, children: job.message })] })), job.batchId && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] uppercase tracking-wide text-gray-2", children: "Batch" }), _jsx("dd", { className: "text-[11px] font-mono text-gray-2 break-all", children: job.batchId })] }))] }), _jsxs("div", { className: "flex justify-end gap-2 border-t border-gray-3 px-3 py-2", children: [jobError && onRetry && (_jsxs(Button, { size: "sm", variant: "outline", disabled: isRetrying, onClick: (e) => {
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: `inline-flex items-center gap-1.5 rounded-md border badge-pad-sm text-[12px] transition-colors cursor-pointer ${chipCls}`, children: [language?.icon ? (_jsx("img", { src: language.icon, alt: langName, className: "h-3.5 shrink-0" })) : null, _jsx("span", { className: "font-mono tracking-tight", children: job.targetLanguage }), jobInProgress && (_jsx(LoaderIcon, { className: "h-3 w-3 shrink-0 animate-spin" })), jobPending && (_jsx(QueuedIcon, { className: "h-3 w-3 shrink-0", strokeWidth: 1.75, "aria-label": "Queued" })), jobError && _jsx(AlertCircleIcon, { className: "h-3 w-3 shrink-0" }), !jobInProgress && !jobError && !jobPending && !jobAborted && (_jsx(CheckIcon, { className: "h-3 w-3 shrink-0 text-feedback-green" }))] }) }), _jsxs(PopoverContent, { align: "start", sideOffset: 6, className: "w-[22rem] max-w-[calc(100vw-2rem)] p-0", children: [_jsxs("div", { className: "flex items-center gap-2 border-b border-border-default px-3 py-2", children: [language?.icon ? (_jsx("img", { src: language.icon, alt: langName, className: "h-4 shrink-0" })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "text-[13px] font-medium text-neutral-grey-100 truncate", children: langName }), _jsxs("div", { className: "text-[11px] text-neutral-grey-50 font-mono truncate", children: [job.targetLanguage, job.sourceLanguage ? ` ← ${job.sourceLanguage}` : ""] })] }), _jsxs("span", { className: `inline-flex items-center gap-1 rounded-badge badge-pad-sm text-2xs font-semibold ${statusBadgeCls}`, children: [jobInProgress && (_jsx(LoaderIcon, { className: "h-2.5 w-2.5 animate-spin" })), jobStatus || "Unknown"] })] }), _jsxs("dl", { className: "divide-y divide-border-default/60", children: [claimedAtValid && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: "Claimed" }), _jsx("dd", { className: "text-[12px] text-neutral-grey-100", children: claimedAt.toLocaleString() })] })), timestampValid && (jobInProgress || jobPending) && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: "Updated" }), _jsx("dd", { className: "text-[12px] text-neutral-grey-100", children: timestamp.toLocaleString() })] })), durationMs != null && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: jobInProgress || jobPending ? "Running" : "Duration" }), _jsxs("dd", { className: "text-[12px] tabular-nums text-neutral-grey-100", title: durationApproximated
+                                            ? "Approximate — measured from batch start"
+                                            : undefined, children: [durationApproximated ? "~" : "", formatDuration(durationMs)] })] })), statistics && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: "Fields" }), _jsxs("dd", { className: "text-[12px] tabular-nums text-neutral-grey-100", children: [fieldText, emptyFieldText ? (_jsxs("span", { className: "ml-1.5 text-neutral-grey-50", children: ["(", emptyFieldText, ")"] })) : null] })] })), statistics && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: "Text" }), _jsxs("dd", { className: "text-[12px] tabular-nums text-neutral-grey-100", children: [formatCount(statistics.sourceCharacterCount), " chars"] })] })), job.totalCost != null && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: "Cost" }), _jsx("dd", { className: "text-[12px] tabular-nums text-neutral-grey-100", children: formatUsdCost(job.totalCost) })] })), lastHeartbeatValid && (jobInProgress || jobPending) && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: "Heartbeat" }), _jsx("dd", { className: "text-[12px] text-neutral-grey-100", children: lastHeartbeat.toLocaleString() })] })), attemptCount > 1 && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: "Attempts" }), _jsx("dd", { className: "text-[12px] tabular-nums text-neutral-grey-100", children: attemptCount })] })), job.hash && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: "Hash" }), _jsx("dd", { className: "text-[11px] font-mono text-neutral-grey-100 break-all", children: job.hash })] })), job.message && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: jobError ? "Error" : jobAborted ? "Aborted" : "Message" }), _jsx("dd", { className: `text-[12px] break-words ${jobError ? "text-feedback-red" : jobAborted ? "text-feedback-orange" : "text-neutral-grey-100"}`, children: job.message })] })), job.batchId && (_jsxs("div", { className: "flex items-baseline gap-3 px-3 py-2", children: [_jsx("dt", { className: "w-20 shrink-0 text-[10px] tracking-wide text-neutral-grey-50", children: "Batch" }), _jsx("dd", { className: "text-[11px] font-mono text-neutral-grey-50 break-all", children: job.batchId })] }))] }), _jsxs("div", { className: "flex justify-end gap-2 border-t border-border-default px-3 py-2", children: [jobError && onRetry && (_jsxs(Button, { size: "sm", variant: "outline", disabled: isRetrying, onClick: (e) => {
                                     e.stopPropagation();
                                     void onRetry();
                                     setOpen(false);