@purposeinplay/payload-ai-translate 0.1.0

package/dist/views/BulkRunsHub/BucketRow.js

@@ -0,0 +1,982 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { categorizeFailure } from '../../lib/error-messages.js';
+import { docHref, globalHref } from '../shared/docHref.js';
+import { EditorError } from '../shared/EditorError.js';
+import { formatCost, formatDuration } from '../shared/format.js';
+import { fmtBucketAiActive, fmtBucketQueued as fmtBucketQueuedHelper, getBucketCountForFilter } from './bucket-grouping.js';
+import { summarizeBucketFailureTypes } from './bucketFailureSummary.js';
+// ---------------------------------------------------------------------------
+// Timestamp formatting — module-scoped helper. Duration and cost are
+// rendered via the shared `formatDuration` / `formatCost` helpers in
+// `views/shared/format.ts` (NEW-17 / NEW-18 / NEW-10).
+// ---------------------------------------------------------------------------
+// ROUND5-2 (v1.2.6): predicate extracted from ROUND3-7's row-summary
+// fix. The deep `LocaleDetailRow` panel was building an `Open →` link
+// from `documentId` without re-running ROUND3-7's guard, so cancel-
+// mid-flight units (which can land with `documentId === null` or
+// the literal string `'null'`) produced `/admin/collections/posts/null`
+// links — the same broken UX ROUND3-7 was meant to prevent, just
+// behind one more click. Single source of truth so any new render
+// site can re-use it.
+function isOpenableDocId(id) {
+    return id != null && id !== 'null' && id !== '';
+}
+function fmtTimestamp(iso) {
+    if (!iso) return '—';
+    try {
+        return new Date(iso).toLocaleString(undefined, {
+            month: 'short',
+            day: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit'
+        });
+    } catch  {
+        return '—';
+    }
+}
+/**
+ * Tree-grouped DrillDown row component. One BucketRow per collection /
+ * global. Default expansion state controlled by parent (failed buckets
+ * open, all-success collapsed).
+ *
+ * Per UX design: bucket header shows succeeded + failed counts, top-2
+ * failure codes (when there are failures), and a "Retry N failed" CTA
+ * that maps to the existing retry-failed endpoint with a `collection`
+ * filter. NO per-bucket cost/duration (cost belongs in Audit & Cost tab;
+ * duration is meaningful at the batch level only).
+ *
+ * Per UI design: elevation-50 tint on the bucket header, red as the only
+ * saturated color on screen (success pills muted by default, failure
+ * pills saturated), 3px error-500 left border on failed doc rows.
+ */ const BUCKET_HEADER_STYLE = {
+    background: 'var(--theme-elevation-50, #f1f5f9)',
+    borderBottom: '1px solid var(--theme-elevation-100, #e5e7eb)',
+    padding: '0.625rem 1rem',
+    fontSize: '0.8125rem',
+    fontWeight: 600,
+    color: 'var(--theme-elevation-1000)',
+    cursor: 'pointer',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.5rem',
+    userSelect: 'none'
+};
+const CHEVRON_STYLE = {
+    color: 'var(--theme-elevation-500)',
+    fontSize: '0.75rem',
+    width: '0.75rem',
+    display: 'inline-block',
+    transition: 'transform 120ms ease'
+};
+const PILL_STYLE_BASE = {
+    fontSize: '0.6875rem',
+    fontWeight: 500,
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '0.25rem'
+};
+const RETRY_BUTTON_STYLE = {
+    border: '1px solid var(--theme-error-500, #b91c1c)',
+    color: 'var(--theme-error-500, #b91c1c)',
+    background: 'transparent',
+    borderRadius: '4px',
+    padding: '0.1875rem 0.625rem',
+    fontSize: '0.6875rem',
+    fontWeight: 500,
+    cursor: 'pointer',
+    marginLeft: '1rem'
+};
+const GLOBAL_BADGE_STYLE = {
+    fontSize: '0.6875rem',
+    color: 'var(--theme-elevation-700)',
+    border: '1px solid var(--theme-elevation-200)',
+    borderRadius: '3px',
+    padding: '0 0.3rem',
+    marginLeft: '0.375rem',
+    fontWeight: 400
+};
+export const BucketRow = ({ bucket, basePath, batchId: _batchId, batchStatus, activeStatusFilter, initialExpanded, isRetrying, onRetryBucket, onExpandedChange, retryingDocKey, onRetryDoc, onLoadBucketDocs, hasMoreInBucket, isLoadingMoreInBucket })=>{
+    const [expanded, setExpanded] = useState(initialExpanded);
+    const [loading, setLoading] = useState(false);
+    const [loadError, setLoadError] = useState(null);
+    const hasFailures = bucket.failedCount > 0;
+    const hasInflight = bucket.pendingCount + bucket.runningCount > 0;
+    // v1.2.7: filter-aware "how many units match the active filter live
+    // in this bucket". Unit-based to match the historical bucket-header
+    // semantics ("8 succeeded" = 8 units, not 4 docs × 2 locales).
+    const matchingUnitCount = getBucketCountForFilter(bucket, activeStatusFilter);
+    // Filter-aware DOC count — independent from unit count above.
+    // Drives the auto-load gate + the "render empty bucket" path:
+    // we need at least one matching DOC for there to be any rows
+    // to fetch / render. A bucket with 4 succeeded units but only 4
+    // failed locales spread across the same 4 docs renders 4 rows,
+    // not 8.
+    const matchingDocCount = activeStatusFilter === 'all' ? bucket.totalDocs : bucket.docCountsByStatus[activeStatusFilter] ?? 0;
+    // The needs-load gate compares "have we loaded any rows in this
+    // bucket?" to "are there any docs in this bucket at all under the
+    // active filter?". When the filter excludes this bucket entirely
+    // (matchingDocCount === 0), we never auto-load — the parent filters
+    // the bucket out via `shouldBucketBeVisibleUnderFilter`, but the
+    // bucket can still flash through this code path during the filter
+    // transition tick.
+    const needsLoad = bucket.loadedDocs === 0 && matchingDocCount > 0;
+    // v1.2.7: filter the displayed docs by the active filter so a doc
+    // that only contains succeeded locales doesn't render under
+    // `Failed`. Buckets with mixed-status docs (one failed + one
+    // succeeded) still show the doc under both filters — that matches
+    // the bucket-count semantics (the doc lights up in both buckets).
+    const visibleDocs = [
+        ...bucket.docs.values()
+    ].filter((doc)=>{
+        if (activeStatusFilter === 'all') return true;
+        const target = activeStatusFilter === 'completed' ? 'success' : activeStatusFilter;
+        return doc.jobs.some((j)=>j.status === target);
+    });
+    // Notify parent on expand/collapse so it can track which buckets are
+    // open across filter changes. Idempotent on remount via the initial
+    // call below.
+    useEffect(()=>{
+        onExpandedChange?.(bucket.collection, expanded);
+    }, [
+        expanded,
+        bucket.collection,
+        onExpandedChange
+    ]);
+    // Auto-load this bucket's docs the first time it's expanded if the
+    // initial paginated batch page didn't include any units from this
+    // collection (the common case for non-`posts` buckets — pagination
+    // starts at the front of the unit list which is usually one
+    // collection's slice).
+    useEffect(()=>{
+        if (!expanded || !needsLoad || loading) return;
+        let cancelled = false;
+        void (async ()=>{
+            setLoading(true);
+            setLoadError(null);
+            try {
+                await onLoadBucketDocs(bucket.collection);
+            } catch (e) {
+                if (!cancelled) {
+                    setLoadError(e instanceof Error ? e.message : String(e));
+                }
+            } finally{
+                if (!cancelled) setLoading(false);
+            }
+        })();
+        return ()=>{
+            cancelled = true;
+        };
+    // We deliberately depend only on (expanded, needsLoad, bucket.collection).
+    // `loading` is the in-flight guard handled inside the effect.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        expanded,
+        needsLoad,
+        bucket.collection
+    ]);
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("tr", {
+                children: /*#__PURE__*/ _jsxs("td", {
+                    colSpan: 7,
+                    style: {
+                        padding: 0
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            "aria-expanded": expanded,
+                            onClick: ()=>setExpanded((v)=>!v),
+                            onKeyDown: (e)=>{
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                    e.preventDefault();
+                                    setExpanded((v)=>!v);
+                                }
+                            },
+                            role: "button",
+                            style: BUCKET_HEADER_STYLE,
+                            tabIndex: 0,
+                            children: [
+                                /*#__PURE__*/ _jsx("span", {
+                                    style: {
+                                        ...CHEVRON_STYLE,
+                                        transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)'
+                                    },
+                                    children: "▶"
+                                }),
+                                /*#__PURE__*/ _jsx("span", {
+                                    style: {
+                                        fontWeight: 600
+                                    },
+                                    children: bucket.collection
+                                }),
+                                bucket.isGlobal && /*#__PURE__*/ _jsx("span", {
+                                    style: GLOBAL_BADGE_STYLE,
+                                    children: "global"
+                                }),
+                                /*#__PURE__*/ _jsxs("span", {
+                                    style: {
+                                        marginLeft: 'auto',
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: '0.75rem'
+                                    },
+                                    children: [
+                                        activeStatusFilter !== 'all' ? /*#__PURE__*/ _jsxs("span", {
+                                            style: {
+                                                ...PILL_STYLE_BASE,
+                                                color: activeStatusFilter === 'failed' ? 'var(--theme-error-500, #b91c1c)' : activeStatusFilter === 'running' || activeStatusFilter === 'pending' ? 'var(--theme-warning-500, #d97706)' : activeStatusFilter === 'completed' ? 'var(--theme-success-500, #16a34a)' : 'var(--theme-elevation-600)'
+                                            },
+                                            title: `Units in this ${bucket.isGlobal ? 'global' : 'collection'} with status ${activeStatusFilter === 'completed' ? 'succeeded' : activeStatusFilter}.`,
+                                            children: [
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    style: {
+                                                        fontSize: '0.5rem'
+                                                    },
+                                                    children: "●"
+                                                }),
+                                                matchingUnitCount,
+                                                ' ',
+                                                activeStatusFilter === 'completed' ? 'succeeded' : activeStatusFilter
+                                            ]
+                                        }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                                            children: [
+                                                bucket.succeededCount > 0 && /*#__PURE__*/ _jsxs("span", {
+                                                    style: {
+                                                        ...PILL_STYLE_BASE,
+                                                        color: hasFailures ? 'var(--theme-elevation-600)' // muted when failure pill is also on screen
+                                                         : 'var(--theme-success-500, #16a34a)'
+                                                    },
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx("span", {
+                                                            style: {
+                                                                fontSize: '0.5rem'
+                                                            },
+                                                            children: "●"
+                                                        }),
+                                                        bucket.succeededCount,
+                                                        " succeeded"
+                                                    ]
+                                                }),
+                                                bucket.failedCount > 0 && /*#__PURE__*/ _jsxs("span", {
+                                                    style: {
+                                                        ...PILL_STYLE_BASE,
+                                                        color: 'var(--theme-error-500, #b91c1c)'
+                                                    },
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx("span", {
+                                                            style: {
+                                                                fontSize: '0.5rem'
+                                                            },
+                                                            children: "●"
+                                                        }),
+                                                        bucket.failedCount,
+                                                        " failed"
+                                                    ]
+                                                }),
+                                                hasInflight && /*#__PURE__*/ _jsxs("span", {
+                                                    style: {
+                                                        ...PILL_STYLE_BASE,
+                                                        color: 'var(--theme-warning-500, #d97706)'
+                                                    },
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx("span", {
+                                                            style: {
+                                                                fontSize: '0.5rem'
+                                                            },
+                                                            children: "●"
+                                                        }),
+                                                        bucket.pendingCount + bucket.runningCount,
+                                                        " in flight"
+                                                    ]
+                                                }),
+                                                bucket.skippedCount > 0 && /*#__PURE__*/ _jsxs("span", {
+                                                    style: {
+                                                        ...PILL_STYLE_BASE,
+                                                        color: 'var(--theme-elevation-600)'
+                                                    },
+                                                    children: [
+                                                        bucket.skippedCount,
+                                                        " skipped"
+                                                    ]
+                                                })
+                                            ]
+                                        }),
+                                        bucket.collectionSpanMs !== null && /*#__PURE__*/ _jsxs("span", {
+                                            style: {
+                                                ...PILL_STYLE_BASE,
+                                                color: 'var(--theme-elevation-600)',
+                                                fontFamily: 'monospace'
+                                            },
+                                            title: bucket.aiActiveMs !== null || bucket.queueWaitMs !== null ? `Collection span — wall-clock from this bucket's first unit start to last completion.\nAI active: ${fmtBucketAiActive(bucket)} · Queued: ${fmtBucketQueuedHelper(bucket)}\n"Queued" is the gap between worker pickup and AI execution (rate-limit / throttle wait). It's a system-level wait, not per-bucket work — buckets processed later in the same batch inherit the queue depth from earlier buckets.` : 'Wall-clock from first unit start to last completion within this collection.',
+                                            children: [
+                                                formatDuration(bucket.collectionSpanMs),
+                                                (bucket.aiActiveMs !== null || bucket.queueWaitMs !== null) && /*#__PURE__*/ _jsxs("span", {
+                                                    style: {
+                                                        marginLeft: '0.35rem',
+                                                        fontSize: '0.625rem',
+                                                        color: 'var(--theme-elevation-500)'
+                                                    },
+                                                    children: [
+                                                        "(AI ",
+                                                        fmtBucketAiActive(bucket),
+                                                        " · queued ",
+                                                        fmtBucketQueuedHelper(bucket),
+                                                        ")"
+                                                    ]
+                                                })
+                                            ]
+                                        }),
+                                        hasFailures && /*#__PURE__*/ _jsx("button", {
+                                            disabled: isRetrying || hasInflight,
+                                            onClick: (e)=>{
+                                                e.stopPropagation();
+                                                onRetryBucket(bucket.collection);
+                                            },
+                                            style: {
+                                                ...RETRY_BUTTON_STYLE,
+                                                opacity: isRetrying || hasInflight ? 0.5 : 1,
+                                                cursor: isRetrying || hasInflight ? 'not-allowed' : 'pointer'
+                                            },
+                                            title: hasInflight ? 'Wait for in-flight units to finish before retrying.' : `Retry the ${bucket.failedCount} failed unit${bucket.failedCount === 1 ? '' : 's'} in this ${bucket.isGlobal ? 'global' : 'collection'}.`,
+                                            type: "button",
+                                            children: isRetrying ? 'Retrying…' : `Retry ${bucket.failedCount} failed`
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        expanded && bucket.distinctFailureCodes > 1 && // v1.2.7: suppress the "N different error types" summary
+                        // when the active filter is non-failure — the editor is
+                        // explicitly looking at succeeded / pending / etc., so the
+                        // failure breakdown is noise.
+                        (activeStatusFilter === 'all' || activeStatusFilter === 'failed') && (()=>{
+                            // ROUND3-8: route the bucket-summary error-types through
+                            // the same `categorizeFailure` helper the per-unit
+                            // drill-down uses (NEW-12 / Group H). Previously the
+                            // summary keyed off the raw persisted `failureCode` and
+                            // rendered "Translation system is not set up" for
+                            // cancel-mid-flight units while the drill-down correctly
+                            // said "Stopped mid-run". Editors who didn't drill in saw
+                            // a misleading config-broken signal. Threading
+                            // `batchStatus` through the categorizer collapses both
+                            // surfaces onto the same story. Pure helper extracted to
+                            // `bucketFailureSummary.ts` so the grouping logic is
+                            // unit-tested.
+                            const summaryEntries = summarizeBucketFailureTypes(bucket.topFailureCodes, batchStatus);
+                            // If everything collapsed to one bucket post-categorisation
+                            // the "different error types" framing no longer applies —
+                            // suppress the line entirely, the unit-level drill-down is
+                            // the authoritative surface.
+                            if (summaryEntries.length <= 1) return null;
+                            return /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    padding: '0.375rem 1rem 0.375rem 2.25rem',
+                                    fontSize: '0.75rem',
+                                    color: 'var(--theme-warning-500, #d97706)',
+                                    background: 'var(--theme-elevation-0)',
+                                    borderBottom: '1px solid var(--theme-elevation-100)'
+                                },
+                                children: [
+                                    summaryEntries.length,
+                                    " different error type",
+                                    summaryEntries.length === 1 ? '' : 's',
+                                    " in this",
+                                    ' ',
+                                    bucket.isGlobal ? 'global' : 'collection',
+                                    " —",
+                                    ' ',
+                                    summaryEntries.map(({ title, count })=>`${title} (${count})`).join(', '),
+                                    summaryEntries.length > 2 && '. See rows for full breakdown.'
+                                ]
+                            });
+                        })()
+                    ]
+                })
+            }),
+            expanded && loading && /*#__PURE__*/ _jsx("tr", {
+                children: /*#__PURE__*/ _jsxs("td", {
+                    colSpan: 7,
+                    style: {
+                        padding: '0.5rem 1rem 0.5rem 2.25rem',
+                        fontSize: '0.75rem',
+                        color: 'var(--theme-elevation-600)',
+                        background: 'var(--theme-elevation-0)',
+                        borderBottom: '1px solid var(--theme-elevation-100)'
+                    },
+                    children: [
+                        "Loading ",
+                        bucket.totalDocs,
+                        " doc",
+                        bucket.totalDocs === 1 ? '' : 's',
+                        " in this",
+                        ' ',
+                        bucket.isGlobal ? 'global' : 'collection',
+                        "…"
+                    ]
+                })
+            }),
+            expanded && !loading && loadError && /*#__PURE__*/ _jsx("tr", {
+                children: /*#__PURE__*/ _jsxs("td", {
+                    colSpan: 7,
+                    style: {
+                        padding: '0.5rem 1rem 0.5rem 2.25rem',
+                        fontSize: '0.75rem',
+                        color: 'var(--theme-error-500, #b91c1c)',
+                        background: 'var(--theme-elevation-0)',
+                        borderBottom: '1px solid var(--theme-elevation-100)'
+                    },
+                    children: [
+                        "Could not load the docs for this ",
+                        bucket.isGlobal ? 'global' : 'collection',
+                        ". Refresh and try again."
+                    ]
+                })
+            }),
+            expanded && visibleDocs.map((doc)=>/*#__PURE__*/ _jsx(DocRow, {
+                    basePath: basePath,
+                    batchStatus: batchStatus,
+                    doc: doc,
+                    isGlobal: bucket.isGlobal,
+                    isRetrying: retryingDocKey === `${doc.collection}/${doc.documentId}`,
+                    onRetry: ()=>onRetryDoc(doc.collection, doc.documentId)
+                }, `${doc.collection}-${doc.documentId}`)),
+            expanded && !loading && !loadError && visibleDocs.length === 0 && matchingDocCount > 0 && /*#__PURE__*/ _jsx("tr", {
+                children: /*#__PURE__*/ _jsxs("td", {
+                    colSpan: 7,
+                    style: {
+                        padding: '0.5rem 1rem 0.5rem 2.25rem',
+                        fontSize: '0.75rem',
+                        color: 'var(--theme-elevation-500)',
+                        background: 'var(--theme-elevation-0)',
+                        borderBottom: '1px solid var(--theme-elevation-100)'
+                    },
+                    children: [
+                        "Loading ",
+                        matchingDocCount,
+                        " matching doc",
+                        matchingDocCount === 1 ? '' : 's',
+                        " for the active filter…"
+                    ]
+                })
+            }),
+            expanded && !loading && !loadError && bucket.loadedDocs > 0 && hasMoreInBucket && /*#__PURE__*/ _jsx("tr", {
+                children: /*#__PURE__*/ _jsx("td", {
+                    colSpan: 7,
+                    style: {
+                        padding: '0.5rem 1rem 0.6rem 2.25rem',
+                        background: 'var(--theme-elevation-0)',
+                        borderBottom: '1px solid var(--theme-elevation-100)'
+                    },
+                    children: /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        disabled: isLoadingMoreInBucket,
+                        onClick: ()=>onLoadBucketDocs(bucket.collection),
+                        style: {
+                            padding: '0.3rem 0.75rem',
+                            background: 'transparent',
+                            border: '1px solid var(--theme-elevation-200)',
+                            borderRadius: '4px',
+                            color: 'var(--theme-elevation-700)',
+                            fontSize: '0.75rem',
+                            cursor: isLoadingMoreInBucket ? 'not-allowed' : 'pointer'
+                        },
+                        children: isLoadingMoreInBucket ? 'Loading…' : `Load more in ${bucket.collection} (${bucket.loadedDocs} of ${bucket.totalDocs} loaded)`
+                    })
+                })
+            })
+        ]
+    });
+};
+// ---------------------------------------------------------------------------
+// DocRow — one row per (collection, doc) with locale chips inline
+// ---------------------------------------------------------------------------
+const LOCALE_CHIP_STYLE = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '0.25rem',
+    fontSize: '0.6875rem',
+    fontWeight: 500,
+    padding: '0.125rem 0.4rem',
+    borderRadius: '3px',
+    cursor: 'default'
+};
+const STATUS_LABEL = {
+    success: 'Succeeded',
+    failed: 'Failed',
+    pending: 'Pending',
+    running: 'Running',
+    skipped: 'Skipped',
+    reverted: 'Reverted'
+};
+const STATUS_COLOR = {
+    success: 'var(--theme-success-500, #16a34a)',
+    failed: 'var(--theme-error-500, #b91c1c)',
+    pending: 'var(--theme-elevation-500)',
+    running: 'var(--theme-warning-500, #d97706)',
+    skipped: 'var(--theme-elevation-500)',
+    reverted: 'var(--theme-elevation-500)'
+};
+const DocRow = ({ basePath, batchStatus, doc, isGlobal, isRetrying, onRetry })=>{
+    // Auto-expand any doc that has failures so the editor sees the
+    // failure detail without clicking — the UX call from the audit:
+    // "the problem hits the editor before any click."
+    const [expanded, setExpanded] = useState(doc.failedLocaleCount > 0);
+    const hasFailures = doc.failedLocaleCount > 0;
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: /*#__PURE__*/ _jsx("tr", {
+            children: /*#__PURE__*/ _jsxs("td", {
+                colSpan: 7,
+                style: {
+                    padding: '0.4rem 1rem 0.4rem 2.25rem',
+                    borderBottom: '1px solid var(--theme-elevation-100)',
+                    background: hasFailures ? 'var(--theme-error-50, rgba(185,28,28,0.04))' : 'var(--theme-elevation-0)',
+                    borderLeft: hasFailures ? '3px solid var(--theme-error-500, #b91c1c)' : '3px solid transparent',
+                    fontSize: '0.8125rem'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        "aria-expanded": expanded,
+                        onClick: ()=>setExpanded((v)=>!v),
+                        onKeyDown: (e)=>{
+                            if (e.key === 'Enter' || e.key === ' ') {
+                                e.preventDefault();
+                                setExpanded((v)=>!v);
+                            }
+                        },
+                        role: "button",
+                        style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '0.75rem',
+                            cursor: 'pointer',
+                            userSelect: 'none'
+                        },
+                        tabIndex: 0,
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                style: {
+                                    color: 'var(--theme-elevation-500)',
+                                    fontSize: '0.7rem',
+                                    width: '0.7rem',
+                                    display: 'inline-block',
+                                    transition: 'transform 120ms ease',
+                                    transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)'
+                                },
+                                children: "▶"
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                style: {
+                                    minWidth: '5rem',
+                                    color: 'var(--theme-elevation-1000)'
+                                },
+                                children: !isOpenableDocId(doc.documentId) ? /*#__PURE__*/ _jsx("span", {
+                                    style: {
+                                        color: 'var(--theme-elevation-500)',
+                                        fontStyle: 'italic',
+                                        fontFamily: 'inherit'
+                                    },
+                                    title: "The unit's document id wasn't resolved before the batch was cancelled — no document to open.",
+                                    children: "(id unresolved)"
+                                }) : /*#__PURE__*/ _jsx("a", {
+                                    // 2026-06-05: globals route through globalHref; previous
+                                    // code always used docHref and built
+                                    // `/admin/collections/<slug>/<slug>` for globals like
+                                    // `translation-keys` — a 404. The deeper per-locale
+                                    // panel below (~line 909) already had this fix; this
+                                    // is the per-doc row link, same fix needed here.
+                                    href: (isGlobal ? globalHref(basePath, doc.collection, null) : docHref(basePath, doc.collection, doc.documentId, null)) ?? '#',
+                                    onClick: (e)=>e.stopPropagation(),
+                                    rel: "noopener noreferrer",
+                                    style: {
+                                        color: 'var(--theme-text-link, #2563eb)',
+                                        textDecoration: 'none',
+                                        fontFamily: 'monospace'
+                                    },
+                                    target: "_blank",
+                                    children: isGlobal ? doc.collection : `#${doc.documentId}`
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    display: 'flex',
+                                    flexWrap: 'wrap',
+                                    gap: '0.4rem'
+                                },
+                                children: doc.jobs.map((job)=>/*#__PURE__*/ _jsx(LocaleChip, {
+                                        job: job
+                                    }, job.locale))
+                            }),
+                            /*#__PURE__*/ _jsxs("span", {
+                                style: {
+                                    marginLeft: 'auto',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '1rem',
+                                    fontSize: '0.75rem',
+                                    color: 'var(--theme-elevation-600)',
+                                    fontFamily: 'monospace'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsxs("span", {
+                                        title: doc.docAiActiveMs !== null && doc.docQueueWaitMs !== null ? `Doc span — from first locale start to last completion.\nAI active: ${formatDuration(doc.docAiActiveMs)} · Queue wait: ${formatDuration(doc.docQueueWaitMs)}${doc.maxAttempts > 1 ? '\nIncludes retry attempts.' : ''}` : "Doc span — from this doc's first locale start to its last completion. Includes any throttle queue wait. Doc-level AI compute time wasn't recorded on this batch (legacy data).",
+                                        children: [
+                                            formatDuration(doc.docSpanMs),
+                                            doc.docAiActiveMs !== null && doc.docQueueWaitMs !== null && /*#__PURE__*/ _jsxs("span", {
+                                                style: {
+                                                    marginLeft: '0.35rem',
+                                                    fontSize: '0.625rem',
+                                                    color: 'var(--theme-elevation-500)'
+                                                },
+                                                children: [
+                                                    "(AI ",
+                                                    formatDuration(doc.docAiActiveMs),
+                                                    ")"
+                                                ]
+                                            }),
+                                            doc.maxAttempts > 1 && /*#__PURE__*/ _jsx("span", {
+                                                style: {
+                                                    marginLeft: '0.35rem',
+                                                    fontSize: '0.625rem',
+                                                    color: 'var(--theme-warning-500, #d97706)'
+                                                },
+                                                children: "(incl. retries)"
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        title: "Total cost across all locales for this doc",
+                                        children: formatCost(doc.totalCostUsd)
+                                    }),
+                                    doc.maxAttempts > 1 && /*#__PURE__*/ _jsxs("span", {
+                                        style: {
+                                            color: 'var(--theme-warning-500, #d97706)'
+                                        },
+                                        title: "Highest attempt count across this doc's locales",
+                                        children: [
+                                            doc.maxAttempts,
+                                            "× attempts"
+                                        ]
+                                    }),
+                                    hasFailures && /*#__PURE__*/ _jsx("button", {
+                                        disabled: isRetrying,
+                                        onClick: (e)=>{
+                                            e.stopPropagation();
+                                            onRetry();
+                                        },
+                                        style: {
+                                            border: '1px solid var(--theme-error-500, #b91c1c)',
+                                            color: 'var(--theme-error-500, #b91c1c)',
+                                            background: 'transparent',
+                                            borderRadius: '4px',
+                                            padding: '0.1rem 0.5rem',
+                                            fontSize: '0.6875rem',
+                                            fontWeight: 500,
+                                            cursor: isRetrying ? 'wait' : 'pointer',
+                                            opacity: isRetrying ? 0.5 : 1
+                                        },
+                                        title: `Retry the ${doc.failedLocaleCount} failed locale${doc.failedLocaleCount === 1 ? '' : 's'} for this doc.`,
+                                        type: "button",
+                                        children: isRetrying ? 'Retrying…' : `Retry ${doc.failedLocaleCount}`
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    expanded && /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            marginTop: '0.5rem',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: '0.4rem'
+                        },
+                        children: doc.jobs.map((job)=>/*#__PURE__*/ _jsx(LocaleDetailRow, {
+                                basePath: basePath,
+                                batchStatus: batchStatus,
+                                collection: doc.collection,
+                                documentId: doc.documentId,
+                                isGlobal: isGlobal,
+                                job: job
+                            }, `detail-${job.locale}`))
+                    })
+                ]
+            })
+        })
+    });
+};
+const LocaleDetailRow = ({ basePath, batchStatus, collection, documentId, isGlobal, job })=>{
+    const isFailed = job.status === 'failed';
+    // NEW-12 (v1.2.6): route through the categorizer so cancel-mid-flight
+    // units stop showing "Translation system is not set up" copy when 90%
+    // of the batch succeeded. The categorizer also corrects pre-v1.2.6
+    // persisted rows where `failureCode` says `permanent.config` but the
+    // raw message clearly says "Provider returned undefined / non-finite".
+    const categorized = categorizeFailure({
+        failureCode: job.failureCode,
+        failureMessage: job.failureMessage,
+        batchStatus,
+        attemptCount: job.attempts
+    });
+    const code = categorized.editorCode;
+    // ROUND5-2 (v1.2.6): suppress the `Open →` link when the doc id
+    // wasn't resolved (cancel-mid-flight). ROUND3-7 patched the row
+    // summary; this is the deeper detail panel. Building docHref with
+    // a null id produced `/admin/collections/posts/null?locale=es`
+    // which lands the editor on Payload's "document not found" page.
+    // v1.2.7: globals are addressed by slug only (`/admin/globals/<slug>`),
+    // never by id. Pre-v1.2.7 the link always used `docHref` which built
+    // `/admin/collections/translation-keys/translation-keys?locale=es` —
+    // a 404 because translation-keys is a global. Route through the right
+    // builder per surface kind.
+    const localeHref = isOpenableDocId(documentId) ? isGlobal ? globalHref(basePath, collection, job.locale) : docHref(basePath, collection, documentId, job.locale) : null;
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            padding: '0.5rem 0.75rem',
+            background: 'var(--theme-elevation-50, #f8fafc)',
+            border: '1px solid var(--theme-elevation-100)',
+            borderLeft: isFailed ? '3px solid var(--theme-error-500, #b91c1c)' : `3px solid ${STATUS_COLOR[job.status] ?? 'var(--theme-elevation-200)'}`,
+            borderRadius: '4px',
+            fontSize: '0.75rem'
+        },
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'grid',
+                    gridTemplateColumns: 'minmax(2.5rem, auto) minmax(5rem, auto) repeat(3, minmax(0, 1fr)) auto',
+                    gap: '1rem',
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        style: {
+                            fontFamily: 'monospace',
+                            fontWeight: 600,
+                            color: 'var(--theme-elevation-1000)'
+                        },
+                        children: job.locale
+                    }),
+                    /*#__PURE__*/ _jsxs("span", {
+                        style: {
+                            color: STATUS_COLOR[job.status] ?? 'var(--theme-elevation-700)',
+                            fontWeight: 500,
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: '0.3rem'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                style: {
+                                    fontSize: '0.5rem'
+                                },
+                                children: "●"
+                            }),
+                            STATUS_LABEL[job.status] ?? job.status
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(DataField, {
+                        label: "AI time",
+                        value: formatDuration(job.processingDurationMs),
+                        hint: "Provider call latency. Excludes throttle queue wait — that lives at the collection level."
+                    }),
+                    /*#__PURE__*/ _jsx(DataField, {
+                        label: "Cost",
+                        value: formatCost(job.costUsd),
+                        hint: "USD billed for this locale's translation"
+                    }),
+                    /*#__PURE__*/ _jsx(DataField, {
+                        label: "Attempts",
+                        value: String(job.attempts),
+                        hint: "Worker attempts (>1 means retried). Matches the count in the persistent-failure alert.",
+                        tone: job.attempts > 1 ? 'warning' : 'default'
+                    }),
+                    localeHref && /*#__PURE__*/ _jsx("a", {
+                        href: localeHref,
+                        onClick: (e)=>e.stopPropagation(),
+                        rel: "noopener noreferrer",
+                        style: {
+                            color: 'var(--theme-text-link, #2563eb)',
+                            textDecoration: 'none',
+                            fontSize: '0.7rem',
+                            fontWeight: 500
+                        },
+                        target: "_blank",
+                        title: `Open this document in ${job.locale}`,
+                        children: "Open →"
+                    })
+                ]
+            }),
+            (job.startedAt || job.completedAt) && /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    marginTop: '0.35rem',
+                    fontSize: '0.65rem',
+                    color: 'var(--theme-elevation-500)',
+                    fontFamily: 'monospace',
+                    display: 'flex',
+                    gap: '1rem'
+                },
+                children: [
+                    job.startedAt && /*#__PURE__*/ _jsxs("span", {
+                        children: [
+                            "Started: ",
+                            fmtTimestamp(job.startedAt)
+                        ]
+                    }),
+                    job.completedAt && /*#__PURE__*/ _jsxs("span", {
+                        children: [
+                            "Completed: ",
+                            fmtTimestamp(job.completedAt)
+                        ]
+                    })
+                ]
+            }),
+            isFailed && /*#__PURE__*/ _jsx("div", {
+                style: {
+                    marginTop: '0.5rem'
+                },
+                children: /*#__PURE__*/ _jsx(EditorError, {
+                    code: code,
+                    compact: true,
+                    context: {
+                        locale: job.locale
+                    },
+                    details: categorized.details
+                })
+            })
+        ]
+    });
+};
+// One column of label + value in the LocaleDetailRow grid.
+const DataField = ({ label, value, hint, tone = 'default' })=>/*#__PURE__*/ _jsxs("span", {
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.1rem',
+            fontSize: '0.7rem'
+        },
+        title: hint,
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                style: {
+                    color: 'var(--theme-elevation-500)',
+                    textTransform: 'uppercase',
+                    letterSpacing: '0.03em',
+                    fontSize: '0.6rem',
+                    fontWeight: 600
+                },
+                children: label
+            }),
+            /*#__PURE__*/ _jsx("span", {
+                style: {
+                    color: tone === 'warning' ? 'var(--theme-warning-500, #d97706)' : 'var(--theme-elevation-900)',
+                    fontFamily: 'monospace'
+                },
+                children: value
+            })
+        ]
+    });
+// ---------------------------------------------------------------------------
+// LocaleChip — colored pill per locale, rich tooltip
+// ---------------------------------------------------------------------------
+const STATUS_TO_CHIP = {
+    success: {
+        background: 'transparent',
+        color: 'var(--theme-elevation-700)',
+        dot: 'var(--theme-success-500, #16a34a)',
+        glyph: '●'
+    },
+    failed: {
+        background: 'var(--theme-error-100, #fee2e2)',
+        color: 'var(--theme-error-500, #b91c1c)',
+        dot: 'var(--theme-error-500, #b91c1c)',
+        glyph: '●'
+    },
+    // v1.2.5: outlined dot + faded text so pending is unambiguously
+    // "queued, hasn't started." Pre-1.2.5 pending rendered identical
+    // to success (same transparent bg, same filled glyph, same elev-700
+    // text) — editors couldn't tell finished work from queued work.
+    pending: {
+        background: 'transparent',
+        color: 'var(--theme-elevation-500)',
+        dot: 'var(--theme-elevation-500)',
+        glyph: '○'
+    },
+    // v1.2.5: animate the dot so an editor can see "this is actively
+    // running right now" without needing the chip to update.
+    running: {
+        background: 'var(--theme-warning-100, #fef3c7)',
+        color: 'var(--theme-warning-500, #d97706)',
+        dot: 'var(--theme-warning-500, #d97706)',
+        glyph: '●',
+        animate: true
+    },
+    skipped: {
+        background: 'transparent',
+        color: 'var(--theme-elevation-600)',
+        dot: 'var(--theme-elevation-500)',
+        glyph: '●'
+    }
+};
+const LocaleChip = ({ job })=>{
+    const chip = STATUS_TO_CHIP[job.status] ?? STATUS_TO_CHIP.skipped;
+    // Rich tooltip — quick stats without expanding the row. Falls back to
+    // a short summary when we don't have processing/cost data on legacy
+    // rows.
+    const parts = [
+        `${job.locale} — ${STATUS_LABEL[job.status] ?? job.status}`
+    ];
+    if (typeof job.processingDurationMs === 'number' && job.processingDurationMs > 0) {
+        parts.push(formatDuration(job.processingDurationMs));
+    }
+    if (typeof job.costUsd === 'number' && job.costUsd > 0) {
+        parts.push(formatCost(job.costUsd));
+    }
+    if (job.attempts > 1) {
+        parts.push(`${job.attempts} attempts`);
+    }
+    if (job.failureCode) {
+        parts.push(`code: ${job.failureCode}`);
+    }
+    return /*#__PURE__*/ _jsxs("span", {
+        style: {
+            ...LOCALE_CHIP_STYLE,
+            background: chip.background,
+            color: chip.color,
+            cursor: 'default',
+            border: '1px solid transparent',
+            fontFamily: 'monospace'
+        },
+        title: parts.join(' · '),
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                style: {
+                    fontSize: '0.5rem',
+                    color: chip.dot,
+                    ...chip.animate ? {
+                        animation: 'translation-hub-pulse 1.2s ease-in-out infinite'
+                    } : null
+                },
+                children: chip.glyph
+            }),
+            job.locale
+        ]
+    });
+};
+// v1.2.5: lightweight keyframe inject. Defining `@keyframes` inline
+// via a styled wrapper is the cheapest cross-theme path — Payload's
+// admin shell doesn't expose a global stylesheet hook for plugins.
+// Mounted once at the bottom of LocaleChip so any consumer that
+// renders the chip gets the animation rule installed.
+const PULSE_KEYFRAMES = `
+@keyframes translation-hub-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.35; }
+}
+`;
+if (typeof document !== 'undefined' && !document.getElementById('translation-hub-pulse-keyframes')) {
+    const style = document.createElement('style');
+    style.id = 'translation-hub-pulse-keyframes';
+    style.textContent = PULSE_KEYFRAMES;
+    document.head.appendChild(style);
+}