@purposeinplay/payload-ai-translate 0.1.0

package/dist/views/BulkRunsHub/BatchRow.js

@@ -0,0 +1,1222 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import { categorizeFailure } from '../../lib/error-messages.js';
+import { docHref } from '../shared/docHref.js';
+import { EditorError } from '../shared/EditorError.js';
+import { readResponseError } from '../shared/fetch-error-body.js';
+import { filterPillColors } from '../shared/filterPillStyle.js';
+import { formatCost, formatDuration } from '../shared/format.js';
+import { isActiveStatus } from '../TranslationHub/BulkTranslate.types.js';
+import { RevertConfirmModal } from '../TranslationHub/BulkTranslateTerminalCard.js';
+import { BucketRow } from './BucketRow.js';
+import { groupJobsIntoBuckets, shouldBucketBeExpandedByDefault, shouldBucketBeVisibleUnderFilter } from './bucket-grouping.js';
+import { StatusBadge, UnitStatusBadge } from './StatusBadge.js';
+// ---------------------------------------------------------------------------
+// Constants
+// ---------------------------------------------------------------------------
+const PROGRESS_TRACK_STYLE = {
+    height: '3px',
+    width: '48px',
+    background: 'var(--theme-elevation-100)',
+    borderRadius: '2px',
+    overflow: 'hidden',
+    display: 'inline-block',
+    verticalAlign: 'middle'
+};
+const TD_STYLE = {
+    padding: '0.55rem 0.5rem',
+    borderTop: '1px solid var(--theme-elevation-100)',
+    whiteSpace: 'nowrap',
+    fontSize: '0.8125rem',
+    color: 'var(--theme-elevation-800)',
+    verticalAlign: 'middle'
+};
+const TH_STYLE = {
+    textAlign: 'left',
+    padding: '0.4rem 0.5rem',
+    fontSize: '0.7rem',
+    fontWeight: 600,
+    textTransform: 'uppercase',
+    letterSpacing: '0.05em',
+    color: 'var(--theme-elevation-500)',
+    borderBottom: '1px solid var(--theme-elevation-150)',
+    whiteSpace: 'nowrap'
+};
+// Unit-level filter chips. `'completed'` is the API's status param value
+// for the success bucket — UI labels it "Succeeded" since "Completed"
+// reads as ambiguous with "finished, regardless of outcome." See
+// CHIP_LABELS below for the display mapping.
+const UNIT_FILTER_CHIPS = [
+    'all',
+    'pending',
+    'running',
+    'completed',
+    'failed',
+    'skipped',
+    'reverted'
+];
+const CHIP_LABELS = {
+    all: 'All',
+    pending: 'Pending',
+    running: 'Running',
+    completed: 'Succeeded',
+    failed: 'Failed',
+    skipped: 'Skipped',
+    reverted: 'Reverted'
+};
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+// ROUND3-6: per-batch `/status` fetch dedup lives in its own module so
+// it can be unit-tested without dragging the React component in. See
+// `dedupedStatusFetch.ts` for the rationale.
+import { dedupedStatusFetch } from './dedupedStatusFetch.js';
+function relTime(iso) {
+    const diff = Date.now() - new Date(iso).getTime();
+    const s = Math.floor(diff / 1000);
+    if (s < 86_400) {
+        if (s < 60) return `${s}s ago`;
+        if (s < 3600) return `${Math.floor(s / 60)}m ago`;
+        return `${Math.floor(s / 3600)}h ago`;
+    }
+    return new Date(iso).toLocaleDateString(undefined, {
+        month: 'short',
+        day: 'numeric'
+    });
+}
+/**
+ * Renders a wallclock span between two ISO timestamps. Wrapper around
+ * `formatDuration(ms)` for sites that have start / end strings rather
+ * than a raw duration. Open-ended spans (no `endIso`) use `Date.now()`
+ * so a running batch's wallclock keeps ticking.
+ */ function fmtWallclock(startIso, endIso) {
+    if (!startIso) return '—';
+    const end = endIso ? new Date(endIso) : new Date();
+    const ms = end.getTime() - new Date(startIso).getTime();
+    return formatDuration(ms);
+}
+export function describeBatchProgress(completedUnits, totalUnits) {
+    if (totalUnits <= 0) return {
+        kind: 'empty'
+    };
+    const completed = Math.max(0, completedUnits);
+    const percent = Math.min(100, completed / totalUnits * 100);
+    return {
+        kind: 'fraction',
+        completed,
+        total: totalUnits,
+        percent
+    };
+}
+function truncateId(id, max = 12) {
+    if (id.length <= max) return id;
+    return `${id.slice(0, max)}…`;
+}
+/** Revert-window countdown string: "22h left", "45m left", or "expired". */ function revertCountdown(expiresAt) {
+    if (!expiresAt) return null;
+    const ms = new Date(expiresAt).getTime() - Date.now();
+    if (ms <= 0) return null;
+    const h = Math.floor(ms / 3_600_000);
+    const m = Math.floor(ms % 3_600_000 / 60_000);
+    if (h > 0) return `${h}h ${m}m left`;
+    return `${m}m left`;
+}
+/** Map public filter chip value to API status param. */ function chipToApiStatus(chip) {
+    if (chip === 'all') return undefined;
+    // 'completed' maps to the API's status param value
+    return chip;
+}
+const DrillDown = ({ basePath, batch, onAfterAction })=>{
+    const [unitFilter, setUnitFilter] = useState(batch.failedUnits > 0 ? 'failed' : 'all');
+    const [statusData, setStatusData] = useState(null);
+    const [statusError, setStatusError] = useState(null);
+    const [nextCursor, setNextCursor] = useState(null);
+    const [loadingMore, setLoadingMore] = useState(false);
+    const [expandedUnits, setExpandedUnits] = useState(new Set());
+    const [revertOpen, setRevertOpen] = useState(false);
+    const [cancelling, setCancelling] = useState(false);
+    const [cancelError, setCancelError] = useState(null);
+    const [retryingFailed, setRetryingFailed] = useState(false);
+    const [retryError, setRetryError] = useState(null);
+    const cancelledRef = useRef(false);
+    const timerRef = useRef(undefined);
+    // Track which bucket collections have been auto-loaded via
+    // onLoadBucketDocs. Declared at the top of the component so the
+    // polling effect can reset it when filter changes.
+    const loadedBucketsRef = useRef(new Set());
+    // Per-bucket pagination cursor for the "Load more in this bucket"
+    // button. Map value: opaque cursor string for the NEXT page, or
+    // `null` if this bucket has no more pages. Missing key = never
+    // fetched. Reset on filter change.
+    const bucketCursorsRef = useRef(new Map());
+    // De-dupe re-entrant calls to onLoadBucketDocs for the same
+    // collection while a request is in flight.
+    const loadingBucketRef = useRef(new Set());
+    // Bump on every bucket load to force a re-render so BucketRow
+    // can read fresh cursor + loading state via the helpers below.
+    const [bucketLoadingCount, setBucketLoadingCount] = useState(0);
+    void bucketLoadingCount; // referenced via helper closures
+    // v1.2.7: track which buckets are currently expanded so the filter-
+    // change effect can re-fetch them under the new filter. Without this,
+    // clicking "Failed" while `pages` is expanded leaves an empty expanded
+    // bucket (no rows match because the bucket was originally loaded with
+    // `?status=all`, and the polling page doesn't include the bucket's
+    // slice). Set bumps via `notifyBucketExpanded` from BucketRow.
+    const expandedBucketsRef = useRef(new Set());
+    // v1.2.7: per-bucket AbortController so a stale in-flight fetch from
+    // the previous filter can't bleed its rows into the new filter's
+    // view. Each call to `onLoadBucketDocs` registers a controller keyed
+    // by `${collection}:${unitFilter}`; the filter-change effect aborts
+    // every controller before resetting state.
+    const bucketAbortControllersRef = useRef(new Map());
+    // v1.2.7: filter epoch — bumped on every filter change. Late-arriving
+    // bucket fetch responses tagged with a stale epoch are dropped before
+    // they can populate the new filter's bucket state. Belt-and-braces
+    // alongside the AbortController above so a non-abortable fetch
+    // (mocked test, browser back-compat) can't race the new filter.
+    const filterEpochRef = useRef(0);
+    // Fetch / poll unit status when drill-down is open.
+    //
+    // v1.2.5 fix (the "expanding any bucket shows nothing" bug): the
+    // polling tick used to call `setStatusData(json.data)` — a full
+    // replacement. That wiped out the bucket-loaded jobs from
+    // `onLoadBucketDocs` (which appends collection-scoped pages to
+    // `statusData.jobs` outside the main pagination). Every 5 seconds
+    // the polling response wiped them away and the bucket went empty,
+    // while `loadedBucketsRef` still said "already loaded" so the
+    // auto-load couldn't re-fire. Stuck-empty until filter change.
+    //
+    // The fix splits "first fetch" from "subsequent polls":
+    //   - First fetch (filter changed / drill-down opened) REPLACES —
+    //     a clean reset is what the user expects.
+    //   - Subsequent polls MERGE — new jobs override matching unitIds,
+    //     prev jobs not in the new response survive. Bucket-loaded
+    //     pages persist across polling ticks.
+    //
+    // We also reset `loadedBucketsRef` on filter change so each bucket
+    // can re-auto-load against the new filter scope.
+    useEffect(()=>{
+        cancelledRef.current = false;
+        loadedBucketsRef.current = new Set();
+        bucketCursorsRef.current = new Map();
+        // v1.2.7: abort any in-flight bucket fetches still riding the
+        // previous filter so they can't append stale rows to the new
+        // filter's bucket view. Then bump the epoch so any non-abortable
+        // late response is dropped server-side via the epoch check inside
+        // `onLoadBucketDocs`.
+        for (const ctrl of bucketAbortControllersRef.current.values()){
+            ctrl.abort();
+        }
+        bucketAbortControllersRef.current = new Map();
+        filterEpochRef.current += 1;
+        let isFirstFetch = true;
+        async function fetchStatus(cursor) {
+            const apiStatus = chipToApiStatus(unitFilter);
+            const params = new URLSearchParams({
+                limit: '20'
+            });
+            if (apiStatus) params.set('status', apiStatus);
+            if (cursor) params.set('cursor', cursor);
+            // ROUND2-1: Payload's collection-list router intercepts requests
+            // whose only query string is `?limit=N`, 308-redirecting them to a
+            // locale-prefixed canonical URL that 404s our custom endpoint.
+            // `useBulkRunsList.buildUrl` got the same fix for the runs list;
+            // the per-batch status fetcher also needs it for the "All" chip
+            // (no `status=…` filter, no `cursor=…`). `depth=0` is a no-op for
+            // our handler but makes the URL non-bare.
+            params.set('depth', '0');
+            try {
+                // ROUND3-6: route through the module-level dedup so StrictMode
+                // dev double-mount collapses to a single network call instead
+                // of the paired-burst pattern editors saw on every row-expand.
+                const res = await dedupedStatusFetch(`${basePath}/api/translation-hub/bulk-translate/${batch.id}/status?${params}`);
+                if (cancelledRef.current) return;
+                if (!res.ok) throw new Error(await readResponseError(res));
+                const json = await res.json();
+                if (cancelledRef.current) return;
+                if (isFirstFetch) {
+                    setStatusData(json.data);
+                    isFirstFetch = false;
+                    // v1.2.7: re-fetch any buckets that were expanded under the
+                    // previous filter so the expanded panel doesn't go empty
+                    // when the filter changes. The first-page response only
+                    // covers ONE bucket's slice (pagination starts at offset 0)
+                    // — without an explicit re-fetch every other previously-
+                    // expanded bucket would render with zero rows while the
+                    // header still claimed N matching docs. Skip buckets that
+                    // have zero docs under the new filter (they get hidden
+                    // anyway via `shouldBucketBeVisibleUnderFilter`).
+                    const statusKey = unitFilter === 'all' ? 'all' : unitFilter;
+                    for (const collection of expandedBucketsRef.current){
+                        const counts = json.data.countsByCollection?.[collection]?.docCountsByStatus;
+                        const matching = counts ? counts[statusKey] ?? 0 : 0;
+                        if (matching > 0) {
+                            // Fire-and-forget — `onLoadBucketDocs` de-dupes via
+                            // loadingBucketRef and guards against epoch drift.
+                            void onLoadBucketDocs(collection);
+                        }
+                    }
+                } else {
+                    // Merge: keep prev.jobs that aren't in the new response
+                    // (these are bucket-loaded extras the polling page doesn't
+                    // see). Server-side aggregates (countsByCollection,
+                    // nextCursor, etc.) come from the fresh response.
+                    setStatusData((prev)=>{
+                        if (!prev) return json.data;
+                        const newJobsById = new Map(json.data.jobs.map((j)=>[
+                                j.unitId,
+                                j
+                            ]));
+                        const preserved = prev.jobs.filter((j)=>!newJobsById.has(j.unitId));
+                        return {
+                            ...json.data,
+                            jobs: [
+                                ...json.data.jobs,
+                                ...preserved
+                            ]
+                        };
+                    });
+                }
+                setNextCursor(json.data.nextCursor);
+                setStatusError(null);
+            } catch (e) {
+                if (!cancelledRef.current) {
+                    setStatusError(e instanceof Error ? e.message : String(e));
+                }
+            } finally{
+                if (!cancelledRef.current && isActiveStatus(batch.status)) {
+                    if (document.visibilityState === 'visible') {
+                        timerRef.current = setTimeout(()=>fetchStatus(), 5000);
+                    }
+                }
+            }
+        }
+        function onVisibility() {
+            if (document.visibilityState === 'visible' && !cancelledRef.current) {
+                if (timerRef.current) clearTimeout(timerRef.current);
+                fetchStatus();
+            }
+        }
+        document.addEventListener('visibilitychange', onVisibility);
+        fetchStatus();
+        return ()=>{
+            cancelledRef.current = true;
+            if (timerRef.current) clearTimeout(timerRef.current);
+            document.removeEventListener('visibilitychange', onVisibility);
+        };
+    }, [
+        basePath,
+        batch.id,
+        batch.status,
+        unitFilter
+    ]);
+    async function onLoadMore() {
+        if (!nextCursor || loadingMore) return;
+        setLoadingMore(true);
+        const apiStatus = chipToApiStatus(unitFilter);
+        const params = new URLSearchParams({
+            limit: '20',
+            cursor: nextCursor
+        });
+        if (apiStatus) params.set('status', apiStatus);
+        // ROUND2-1: see fetchStatus above — `depth=0` defeats the Payload
+        // collection-list redirect heuristic on `?limit=N` URLs.
+        params.set('depth', '0');
+        try {
+            const res = await dedupedStatusFetch(`${basePath}/api/translation-hub/bulk-translate/${batch.id}/status?${params}`);
+            if (!res.ok) throw new Error(await readResponseError(res));
+            const json = await res.json();
+            setStatusData((prev)=>prev ? {
+                    ...json.data,
+                    jobs: [
+                        ...prev.jobs,
+                        ...json.data.jobs
+                    ]
+                } : json.data);
+            setNextCursor(json.data.nextCursor);
+        } catch  {
+        // Non-fatal.
+        } finally{
+            setLoadingMore(false);
+        }
+    }
+    // Bucket-on-expand + Load More within bucket. Tracks per-bucket
+    // pagination state via `bucketCursors` so callers can fetch
+    // additional pages of the same collection. The first call (no
+    // existing cursor) is the auto-load fired by BucketRow on expand;
+    // subsequent calls are the per-bucket "Load N more" button.
+    //
+    // De-duplicates against existing jobs by unitId so re-firing doesn't
+    // double up. Keeps the batch-level `nextCursor` untouched — this
+    // pagination is parallel to the batch-level main cursor.
+    async function onLoadBucketDocs(collection) {
+        if (loadingBucketRef.current.has(collection)) return;
+        loadingBucketRef.current.add(collection);
+        setBucketLoadingCount((n)=>n + 1);
+        const existingCursor = bucketCursorsRef.current.get(collection);
+        // If this bucket previously hit "no more pages" (cursor=null), the
+        // map still has the entry → skip. `has` distinguishes from
+        // `get === undefined` (never fetched).
+        if (bucketCursorsRef.current.has(collection) && existingCursor === null) {
+            loadingBucketRef.current.delete(collection);
+            setBucketLoadingCount((n)=>n - 1);
+            return;
+        }
+        const params = new URLSearchParams({
+            limit: '100',
+            collection
+        });
+        if (existingCursor) params.set('cursor', existingCursor);
+        const apiStatus = chipToApiStatus(unitFilter);
+        if (apiStatus) params.set('status', apiStatus);
+        // ROUND2-1: the `collection=` segment already breaks the bare-`limit`
+        // heuristic, but we set `depth=0` defensively to keep all status
+        // URLs in the same shape — and so any future refactor that drops
+        // `collection=` doesn't reintroduce the regression.
+        params.set('depth', '0');
+        // v1.2.7: register an AbortController + capture the current filter
+        // epoch so the filter-change effect can abort in-flight requests
+        // before they pollute the new filter's bucket state. The dedup
+        // module currently doesn't forward the signal; we abort the
+        // controller anyway, and the epoch guard inside the success path
+        // drops the response if the filter changed while the request was
+        // riding the wire.
+        const controller = new AbortController();
+        bucketAbortControllersRef.current.set(collection, controller);
+        const requestEpoch = filterEpochRef.current;
+        try {
+            const res = await dedupedStatusFetch(`${basePath}/api/translation-hub/bulk-translate/${batch.id}/status?${params}`);
+            // Filter changed while this request was in flight — drop the
+            // response so its rows don't bleed into the new filter view.
+            if (controller.signal.aborted || requestEpoch !== filterEpochRef.current) {
+                return;
+            }
+            if (!res.ok) throw new Error(await readResponseError(res));
+            const json = await res.json();
+            if (controller.signal.aborted || requestEpoch !== filterEpochRef.current) {
+                return;
+            }
+            bucketCursorsRef.current.set(collection, json.data.nextCursor);
+            loadedBucketsRef.current.add(collection);
+            setStatusData((prev)=>{
+                if (!prev) return json.data;
+                const seen = new Set(prev.jobs.map((j)=>j.unitId));
+                const newJobs = json.data.jobs.filter((j)=>!seen.has(j.unitId));
+                return {
+                    ...prev,
+                    jobs: [
+                        ...prev.jobs,
+                        ...newJobs
+                    ]
+                };
+            });
+        } finally{
+            // Only clear the controller entry if it's still the latest one
+            // for this bucket — a later call may have overwritten it.
+            if (bucketAbortControllersRef.current.get(collection) === controller) {
+                bucketAbortControllersRef.current.delete(collection);
+            }
+            loadingBucketRef.current.delete(collection);
+            setBucketLoadingCount((n)=>n - 1);
+        }
+    }
+    /**
+   * Notification hook for BucketRow — tracks which buckets are expanded
+   * so the filter-change effect can re-fetch them under the new filter.
+   * Idempotent: collapsing a bucket then re-expanding refreshes the
+   * tracked state without piling duplicate fetches.
+   */ function notifyBucketExpanded(collection, expanded) {
+        if (expanded) {
+            expandedBucketsRef.current.add(collection);
+        } else {
+            expandedBucketsRef.current.delete(collection);
+        }
+    }
+    async function onCancel() {
+        setCancelling(true);
+        setCancelError(null);
+        try {
+            const res = await fetch(`${basePath}/api/translation-hub/bulk-translate/${batch.id}/cancel`, {
+                method: 'POST',
+                credentials: 'include'
+            });
+            if (!res.ok) throw new Error(await readResponseError(res));
+            onAfterAction();
+        } catch (e) {
+            setCancelError(e instanceof Error ? e.message : String(e));
+        } finally{
+            setCancelling(false);
+        }
+    }
+    async function onRetryFailed() {
+        setRetryingFailed(true);
+        setRetryError(null);
+        try {
+            const res = await fetch(`${basePath}/api/translation-hub/bulk-translate/${batch.id}/retry`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    allFailed: true
+                })
+            });
+            if (!res.ok) throw new Error(await readResponseError(res));
+            onAfterAction();
+        } catch (e) {
+            setRetryError(e instanceof Error ? e.message : String(e));
+        } finally{
+            setRetryingFailed(false);
+        }
+    }
+    // ----- Per-bucket retry -----
+    // Filed by the BucketRow inside the expanded DrillDown. Calls the
+    // existing retry-failed endpoint with a `collection` body field so
+    // only that bucket's failed units get requeued. Tracks a separate
+    // "currently retrying" collection slug so the right bucket button
+    // is the only one disabled while the request is in flight.
+    const [retryingBucket, setRetryingBucket] = useState(null);
+    async function onRetryBucket(collection) {
+        setRetryingBucket(collection);
+        setRetryError(null);
+        try {
+            const res = await fetch(`${basePath}/api/translation-hub/bulk-translate/${batch.id}/retry`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    allFailed: true,
+                    collection
+                })
+            });
+            if (!res.ok) throw new Error(await readResponseError(res));
+            onAfterAction();
+        } catch (e) {
+            setRetryError(e instanceof Error ? e.message : String(e));
+        } finally{
+            setRetryingBucket(null);
+        }
+    }
+    // ----- Per-doc retry -----
+    // Requested by user after the UX-designer-recommended omit was tried
+    // and felt insufficient. Retries every failed locale on a specific
+    // (collection, documentId). Tracks the in-flight doc as
+    // `${collection}/${documentId}` so the row's button is the only one
+    // disabled during the round-trip.
+    const [retryingDocKey, setRetryingDocKey] = useState(null);
+    async function onRetryDoc(collection, documentId) {
+        setRetryingDocKey(`${collection}/${documentId}`);
+        setRetryError(null);
+        try {
+            const res = await fetch(`${basePath}/api/translation-hub/bulk-translate/${batch.id}/retry`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    allFailed: true,
+                    collection,
+                    documentId
+                })
+            });
+            if (!res.ok) throw new Error(await readResponseError(res));
+            onAfterAction();
+        } catch (e) {
+            setRetryError(e instanceof Error ? e.message : String(e));
+        } finally{
+            setRetryingDocKey(null);
+        }
+    }
+    function toggleUnit(unitId) {
+        setExpandedUnits((prev)=>{
+            const next = new Set(prev);
+            if (next.has(unitId)) {
+                next.delete(unitId);
+            } else {
+                next.add(unitId);
+            }
+            return next;
+        });
+    }
+    const counts = statusData?.counts ?? {
+        total: batch.totalUnits,
+        pending: 0,
+        running: 0,
+        completed: batch.completedUnits,
+        failed: batch.failedUnits,
+        skipped: 0,
+        reverted: 0
+    };
+    // Revert affordance stripped from the UI per editor feedback ("I asked
+    // for retry IF something fails. as well as retry/doc"). The backend
+    // endpoint stays in case engineering ever needs it via the API.
+    // `canRevert`, `revertCountdown`, `RevertConfirmModal` are still imported
+    // and used by `BulkTranslateTerminalCard` in the older Translation Hub —
+    // not removed here to avoid breaking that surface in the same change.
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            padding: '1rem 1.25rem',
+            background: 'var(--theme-elevation-50)',
+            borderTop: '1px solid var(--theme-elevation-100)'
+        },
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    justifyContent: 'space-between',
+                    gap: '1rem',
+                    marginBottom: '0.75rem',
+                    flexWrap: 'wrap'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        children: /*#__PURE__*/ _jsxs("p", {
+                            style: {
+                                margin: 0,
+                                fontSize: '0.8125rem',
+                                color: 'var(--theme-elevation-700)'
+                            },
+                            children: [
+                                counts.completed,
+                                " succeeded · ",
+                                counts.failed,
+                                " failed ·",
+                                ' ',
+                                counts.pending + counts.running,
+                                " pending/running · ",
+                                counts.skipped,
+                                " skipped"
+                            ]
+                        })
+                    }),
+                    isActiveStatus(batch.status) && /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'flex-end',
+                            gap: '0.25rem'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                disabled: cancelling || batch.status === 'cancelling',
+                                onClick: onCancel,
+                                style: {
+                                    padding: '0.3rem 0.75rem',
+                                    background: 'transparent',
+                                    border: '1px solid var(--theme-elevation-300)',
+                                    borderRadius: '4px',
+                                    color: 'var(--theme-elevation-700)',
+                                    fontSize: '0.8125rem',
+                                    cursor: cancelling || batch.status === 'cancelling' ? 'not-allowed' : 'pointer'
+                                },
+                                children: batch.status === 'cancelling' ? 'Cancelling…' : 'Cancel run'
+                            }),
+                            cancelError && /*#__PURE__*/ _jsx("span", {
+                                style: {
+                                    fontSize: '0.75rem',
+                                    color: 'var(--theme-error-500, #b91c1c)'
+                                },
+                                children: cancelError
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                role: "group",
+                "aria-label": "Filter units inside this batch by status",
+                style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '0.5rem',
+                    flexWrap: 'wrap',
+                    marginBottom: '0.75rem'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        style: {
+                            fontSize: '0.6875rem',
+                            fontWeight: 600,
+                            textTransform: 'uppercase',
+                            letterSpacing: '0.05em',
+                            color: 'var(--theme-elevation-500)',
+                            marginRight: '0.25rem'
+                        },
+                        children: "Units in this batch"
+                    }),
+                    UNIT_FILTER_CHIPS.map((chip)=>{
+                        const isActive = unitFilter === chip;
+                        const colors = filterPillColors(isActive);
+                        const count = chip === 'all' ? counts.total : chip === 'completed' ? counts.completed : counts[chip];
+                        return /*#__PURE__*/ _jsxs("button", {
+                            "aria-pressed": isActive,
+                            type: "button",
+                            onClick: ()=>setUnitFilter(chip),
+                            style: {
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                gap: '0.3rem',
+                                padding: '0.2rem 0.55rem',
+                                fontSize: '0.75rem',
+                                borderRadius: '4px',
+                                border: colors.border,
+                                background: colors.background,
+                                color: colors.color,
+                                cursor: 'pointer',
+                                fontWeight: isActive ? 600 : 400
+                            },
+                            children: [
+                                CHIP_LABELS[chip],
+                                count !== undefined && count >= 0 && /*#__PURE__*/ _jsx("span", {
+                                    style: {
+                                        padding: '0 0.3rem',
+                                        // Inner count badge: contrast with the pill body, not
+                                        // the page. Inverted on active pills (light badge on
+                                        // dark pill) so the count stays legible against the
+                                        // near-black background.
+                                        background: isActive ? 'var(--theme-elevation-800)' : 'var(--theme-elevation-150)',
+                                        color: isActive ? 'var(--theme-elevation-50)' : 'var(--theme-elevation-800)',
+                                        borderRadius: '10px',
+                                        fontSize: '0.65rem',
+                                        fontWeight: 600
+                                    },
+                                    children: count
+                                })
+                            ]
+                        }, chip);
+                    })
+                ]
+            }),
+            statusError && /*#__PURE__*/ _jsxs("p", {
+                style: {
+                    margin: '0 0 0.5rem',
+                    fontSize: '0.8125rem',
+                    color: 'var(--theme-error-500, #b91c1c)'
+                },
+                children: [
+                    "Failed to load unit detail: ",
+                    statusError
+                ]
+            }),
+            statusData && /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    overflowX: 'auto'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("table", {
+                        style: {
+                            width: '100%',
+                            borderCollapse: 'collapse',
+                            fontSize: '0.8125rem',
+                            color: 'var(--theme-elevation-800)'
+                        },
+                        children: /*#__PURE__*/ _jsx("tbody", {
+                            children: (()=>{
+                                // v1.2.7: filter-aware bucket list. Build the full
+                                // bucket set, then hide buckets that have zero docs
+                                // under the active filter so the bucket header doesn't
+                                // contradict the doc rows. When the filter is `all`,
+                                // every bucket renders.
+                                const allBuckets = groupJobsIntoBuckets(statusData.jobs, statusData.countsByCollection ?? {});
+                                const visibleBuckets = allBuckets.filter((b)=>shouldBucketBeVisibleUnderFilter(b, unitFilter));
+                                return visibleBuckets.map((bucket)=>{
+                                    // Per-bucket pagination state. `bucketCursor`:
+                                    //   undefined → never fetched (auto-load fires on
+                                    //               first expand)
+                                    //   string    → more pages available (Load More)
+                                    //   null      → no more pages (Load More hidden)
+                                    const bucketCursor = bucketCursorsRef.current.get(bucket.collection);
+                                    const hasMoreInBucket = bucket.loadedDocs < bucket.totalDocs && (bucketCursor === undefined || bucketCursor !== null);
+                                    const isLoadingMoreInBucket = loadingBucketRef.current.has(bucket.collection);
+                                    return /*#__PURE__*/ _jsx(BucketRow, {
+                                        activeStatusFilter: unitFilter,
+                                        basePath: basePath,
+                                        batchId: String(batch.id),
+                                        batchStatus: batch.status,
+                                        bucket: bucket,
+                                        initialExpanded: shouldBucketBeExpandedByDefault(bucket),
+                                        isRetrying: retryingBucket === bucket.collection,
+                                        onRetryBucket: onRetryBucket,
+                                        retryingDocKey: retryingDocKey,
+                                        onRetryDoc: onRetryDoc,
+                                        onLoadBucketDocs: onLoadBucketDocs,
+                                        onExpandedChange: notifyBucketExpanded,
+                                        hasMoreInBucket: hasMoreInBucket,
+                                        isLoadingMoreInBucket: isLoadingMoreInBucket
+                                    }, bucket.collection);
+                                });
+                            })()
+                        })
+                    }),
+                    (()=>{
+                        // v1.2.7: the global "No units match" message ONLY renders
+                        // when EVERY bucket is hidden under the active filter.
+                        // Previously it rendered any time the top-level
+                        // `jobs.length === 0` — which fired even when the bucket
+                        // headers above were still showing pre-filter unit counts
+                        // (the contradiction Bug 1 / Bug 3). Now the empty state
+                        // is the sole signal when the filter excludes everything.
+                        const allBuckets = groupJobsIntoBuckets(statusData.jobs, statusData.countsByCollection ?? {});
+                        const anyVisible = allBuckets.some((b)=>shouldBucketBeVisibleUnderFilter(b, unitFilter));
+                        if (anyVisible) return null;
+                        const label = unitFilter === 'all' ? '' : CHIP_LABELS[unitFilter];
+                        return /*#__PURE__*/ _jsx("p", {
+                            style: {
+                                padding: '0.75rem 0',
+                                margin: 0,
+                                fontSize: '0.8125rem',
+                                color: 'var(--theme-elevation-500)'
+                            },
+                            children: unitFilter === 'all' ? 'No units in this batch.' : `No ${label.toLowerCase()} units in this batch.`
+                        });
+                    })()
+                ]
+            }),
+            batch.failedUnits > 0 && !isActiveStatus(batch.status) && /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    marginTop: '0.75rem',
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '0.75rem'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("button", {
+                        type: "button",
+                        disabled: retryingFailed,
+                        onClick: onRetryFailed,
+                        style: {
+                            padding: '0.35rem 0.75rem',
+                            background: 'transparent',
+                            border: '1px solid var(--theme-elevation-300)',
+                            borderRadius: '4px',
+                            color: 'var(--theme-elevation-800)',
+                            fontSize: '0.8125rem',
+                            cursor: retryingFailed ? 'not-allowed' : 'pointer'
+                        },
+                        children: retryingFailed ? 'Retrying…' : `Retry ${batch.failedUnits} failed unit${batch.failedUnits === 1 ? '' : 's'}`
+                    }),
+                    retryError && /*#__PURE__*/ _jsx("span", {
+                        style: {
+                            fontSize: '0.75rem',
+                            color: 'var(--theme-error-500, #b91c1c)'
+                        },
+                        children: retryError
+                    })
+                ]
+            }),
+            revertOpen && /*#__PURE__*/ _jsx(RevertConfirmModal, {
+                basePath: basePath,
+                batchId: batch.id,
+                onClose: ()=>setRevertOpen(false),
+                onSuccess: ()=>{
+                    setRevertOpen(false);
+                    onAfterAction();
+                }
+            })
+        ]
+    });
+};
+const UnitRow = ({ basePath, job, isExpanded, onToggle })=>{
+    const hasFailed = job.status === 'failed';
+    const unitDocHref = job.collection && job.documentId ? docHref(basePath, job.collection, job.documentId, job.locale) : null;
+    // Editor-facing duration is the provider's actual LLM call time, not
+    // the wallclock delta — that would include throttle wait. Falls back
+    // to wallclock for legacy rows that lack the column.
+    const duration = job.processingDurationMs != null ? formatDuration(job.processingDurationMs) : fmtWallclock(job.startedAt, job.completedAt);
+    const durationTooltip = job.processingDurationMs != null ? 'AI call time. Excludes throttle wait — the batch took longer overall because of rate-limit queuing.' : 'Legacy row: showing wallclock between worker pickup and completion. Includes throttle wait.';
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs("tr", {
+                onClick: hasFailed ? onToggle : undefined,
+                style: {
+                    cursor: hasFailed ? 'pointer' : undefined,
+                    background: isExpanded ? 'var(--theme-elevation-100)' : undefined
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("td", {
+                        style: TD_STYLE,
+                        children: /*#__PURE__*/ _jsx("code", {
+                            style: {
+                                fontSize: '0.75rem'
+                            },
+                            children: job.collection || '—'
+                        })
+                    }),
+                    /*#__PURE__*/ _jsxs("td", {
+                        style: TD_STYLE,
+                        children: [
+                            hasFailed && /*#__PURE__*/ _jsx("span", {
+                                "aria-hidden": "true",
+                                style: {
+                                    display: 'inline-block',
+                                    width: '1rem',
+                                    color: 'var(--theme-elevation-500)',
+                                    fontSize: '0.6rem',
+                                    transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+                                    transition: 'transform 80ms ease',
+                                    marginRight: '0.25rem'
+                                },
+                                children: "▶"
+                            }),
+                            unitDocHref ? /*#__PURE__*/ _jsx("a", {
+                                href: unitDocHref,
+                                onClick: (e)=>e.stopPropagation(),
+                                rel: "noopener noreferrer",
+                                style: {
+                                    fontFamily: 'monospace',
+                                    fontSize: '0.75rem',
+                                    color: 'var(--theme-success-500, #16a34a)',
+                                    textDecoration: 'none'
+                                },
+                                target: "_blank",
+                                title: `Open ${job.collection} #${job.documentId} in ${job.locale}`,
+                                children: truncateId(job.documentId)
+                            }) : /*#__PURE__*/ _jsx("span", {
+                                title: job.documentId,
+                                style: {
+                                    fontFamily: 'monospace',
+                                    fontSize: '0.75rem'
+                                },
+                                children: truncateId(job.documentId)
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("td", {
+                        style: TD_STYLE,
+                        children: /*#__PURE__*/ _jsx("span", {
+                            style: {
+                                display: 'inline-block',
+                                padding: '0.1rem 0.35rem',
+                                background: 'var(--theme-elevation-100)',
+                                borderRadius: '4px',
+                                fontSize: '0.7rem',
+                                fontFamily: 'monospace',
+                                color: 'var(--theme-elevation-800)'
+                            },
+                            children: job.locale
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("td", {
+                        style: TD_STYLE,
+                        children: /*#__PURE__*/ _jsx(UnitStatusBadge, {
+                            status: job.status,
+                            small: true
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("td", {
+                        style: {
+                            ...TD_STYLE,
+                            textAlign: 'right',
+                            color: 'var(--theme-elevation-600)'
+                        },
+                        children: job.attempts
+                    }),
+                    /*#__PURE__*/ _jsx("td", {
+                        style: {
+                            ...TD_STYLE,
+                            textAlign: 'right',
+                            fontFamily: 'monospace',
+                            fontSize: '0.8125rem'
+                        },
+                        children: formatCost(job.costUsd)
+                    }),
+                    /*#__PURE__*/ _jsx("td", {
+                        style: {
+                            ...TD_STYLE,
+                            textAlign: 'right',
+                            color: 'var(--theme-elevation-600)'
+                        },
+                        title: durationTooltip,
+                        children: duration
+                    })
+                ]
+            }),
+            isExpanded && hasFailed && /*#__PURE__*/ _jsx("tr", {
+                children: /*#__PURE__*/ _jsxs("td", {
+                    colSpan: 7,
+                    style: {
+                        ...TD_STYLE,
+                        background: 'var(--theme-elevation-50)',
+                        whiteSpace: 'normal',
+                        padding: '0.75rem 1.25rem',
+                        borderTop: 'none'
+                    },
+                    children: [
+                        (()=>{
+                            // NEW-12 (v1.2.6): route through `categorizeFailure` so
+                            // cancel-mid-flight, mis-classified config-as-provider
+                            // (COST_UNDEFINED), and bare "Not Found" rows all surface
+                            // the right copy instead of the catch-all "Translation
+                            // system is not set up" message. UnitRow doesn't currently
+                            // get the parent batch status — pass `undefined` so the
+                            // categorizer only flips to `cancelled-mid-flight` when
+                            // we wire batchStatus through (call sites must opt in).
+                            if (!job.failureCode && !job.failureMessage) return null;
+                            const categorized = categorizeFailure({
+                                failureCode: job.failureCode,
+                                failureMessage: job.failureMessage,
+                                attemptCount: job.attempts
+                            });
+                            return /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    margin: '0 0 0.5rem'
+                                },
+                                children: /*#__PURE__*/ _jsx(EditorError, {
+                                    code: categorized.editorCode,
+                                    compact: true,
+                                    details: categorized.details
+                                })
+                            });
+                        })(),
+                        /*#__PURE__*/ _jsxs("p", {
+                            style: {
+                                margin: '0 0 0.4rem',
+                                fontSize: '0.75rem',
+                                color: 'var(--theme-elevation-600)'
+                            },
+                            children: [
+                                "Attempts: ",
+                                job.attempts
+                            ]
+                        }),
+                        unitDocHref && /*#__PURE__*/ _jsx("a", {
+                            href: unitDocHref,
+                            rel: "noopener noreferrer",
+                            style: {
+                                fontSize: '0.75rem',
+                                color: 'var(--theme-success-500, #16a34a)',
+                                textDecoration: 'none'
+                            },
+                            target: "_blank",
+                            children: "Open in Payload →"
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+export const BatchRow = ({ basePath, batch, isExpanded, onToggle, onAfterAction, colCount })=>{
+    const isActive = isActiveStatus(batch.status);
+    const progressDescriptor = describeBatchProgress(batch.completedUnits, batch.totalUnits);
+    const countdown = revertCountdown(batch.revertExpiresAt);
+    const showRowRevertNote = countdown !== null && batch.status !== 'reverted' && batch.status !== 'cancelled';
+    // Minute ticker for revert-countdown string — updates every 60s.
+    const [, setTick] = useState(0);
+    useEffect(()=>{
+        if (!showRowRevertNote) return;
+        const id = setInterval(()=>setTick((n)=>n + 1), 60_000);
+        return ()=>clearInterval(id);
+    }, [
+        showRowRevertNote
+    ]);
+    // Click on the row (outside interactive elements) toggles drill-down.
+    function handleRowClick(e) {
+        const target = e.target;
+        if (target.closest('a, button, input, select, textarea')) return;
+        onToggle();
+    }
+    const rowStyle = {
+        cursor: 'pointer',
+        background: isActive ? 'var(--theme-elevation-50)' : isExpanded ? 'var(--theme-elevation-100)' : undefined,
+        transition: 'background 100ms ease'
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs("tr", {
+                onClick: handleRowClick,
+                style: rowStyle,
+                children: [
+                    /*#__PURE__*/ _jsx("td", {
+                        style: {
+                            ...TD_STYLE,
+                            width: '140px',
+                            paddingLeft: isActive ? '0' : TD_STYLE.padding,
+                            borderLeft: isActive ? '3px solid var(--theme-success-500, #16a34a)' : undefined
+                        },
+                        children: /*#__PURE__*/ _jsx("div", {
+                            style: {
+                                paddingLeft: isActive ? '0.35rem' : undefined
+                            },
+                            children: /*#__PURE__*/ _jsx(StatusBadge, {
+                                status: batch.status
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("td", {
+                        style: {
+                            ...TD_STYLE,
+                            minWidth: '160px'
+                        },
+                        children: /*#__PURE__*/ _jsxs("div", {
+                            style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '0.35rem'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx("span", {
+                                    "aria-hidden": "true",
+                                    style: {
+                                        fontSize: '0.6rem',
+                                        color: 'var(--theme-elevation-400)',
+                                        transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+                                        display: 'inline-block',
+                                        transition: 'transform 80ms ease'
+                                    },
+                                    children: "▶"
+                                }),
+                                /*#__PURE__*/ _jsxs("div", {
+                                    children: [
+                                        /*#__PURE__*/ _jsx("span", {
+                                            style: {
+                                                display: 'block',
+                                                fontFamily: 'monospace',
+                                                fontSize: '0.75rem',
+                                                color: 'var(--theme-elevation-900)'
+                                            },
+                                            title: batch.id,
+                                            children: truncateId(batch.id, 14)
+                                        }),
+                                        batch.triggeredByEmail && /*#__PURE__*/ _jsx("span", {
+                                            style: {
+                                                display: 'block',
+                                                fontSize: '0.7rem',
+                                                color: 'var(--theme-elevation-500)',
+                                                marginTop: '0.1rem'
+                                            },
+                                            children: batch.triggeredByEmail
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("td", {
+                        style: {
+                            ...TD_STYLE,
+                            width: '120px',
+                            color: 'var(--theme-elevation-600)',
+                            fontSize: '0.75rem'
+                        },
+                        children: /*#__PURE__*/ _jsx("code", {
+                            children: batch.mode
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("td", {
+                        style: {
+                            ...TD_STYLE,
+                            width: '160px'
+                        },
+                        children: progressDescriptor.kind === 'empty' ? /*#__PURE__*/ _jsx("span", {
+                            style: {
+                                fontSize: '0.8rem',
+                                color: 'var(--theme-elevation-600)',
+                                fontStyle: 'italic'
+                            },
+                            title: "This batch finished without enqueueing any units — typically a cancelled-before-start run or an empty-scope selection.",
+                            children: "No units enqueued"
+                        }) : /*#__PURE__*/ _jsxs("div", {
+                            style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: '0.4rem'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsxs("span", {
+                                    style: {
+                                        fontSize: '0.8rem',
+                                        color: 'var(--theme-elevation-800)'
+                                    },
+                                    children: [
+                                        progressDescriptor.completed,
+                                        " / ",
+                                        progressDescriptor.total
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx("div", {
+                                    role: "progressbar",
+                                    "aria-valuemin": 0,
+                                    "aria-valuemax": progressDescriptor.total,
+                                    "aria-valuenow": progressDescriptor.completed,
+                                    "aria-label": `${progressDescriptor.completed} of ${progressDescriptor.total} units`,
+                                    style: PROGRESS_TRACK_STYLE,
+                                    children: /*#__PURE__*/ _jsx("div", {
+                                        style: {
+                                            width: `${progressDescriptor.percent}%`,
+                                            height: '100%',
+                                            background: 'var(--theme-success-500, #16a34a)'
+                                        }
+                                    })
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("td", {
+                        style: {
+                            ...TD_STYLE,
+                            width: '80px',
+                            textAlign: 'right',
+                            fontFamily: 'monospace',
+                            fontSize: '0.8125rem'
+                        },
+                        children: formatCost(batch.actualCostUsd ?? batch.estimatedCostUsd)
+                    }),
+                    /*#__PURE__*/ _jsxs("td", {
+                        style: {
+                            ...TD_STYLE,
+                            width: '70px',
+                            textAlign: 'right',
+                            color: 'var(--theme-elevation-600)'
+                        },
+                        title: "Wallclock from when the worker first picked up this batch to when it finished. Includes time spent queued waiting for rate-limit slots — expand the row for an AI-active vs queue-wait split per bucket.",
+                        children: [
+                            fmtWallclock(batch.startedAt ?? null, batch.completedAt ?? null),
+                            /*#__PURE__*/ _jsx("span", {
+                                "aria-hidden": "true",
+                                style: {
+                                    marginLeft: '0.25rem',
+                                    color: 'var(--theme-elevation-400)',
+                                    fontSize: '0.65rem',
+                                    cursor: 'help'
+                                },
+                                children: "ⓘ"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("td", {
+                        style: {
+                            ...TD_STYLE,
+                            width: '90px',
+                            color: 'var(--theme-elevation-500)',
+                            fontSize: '0.75rem'
+                        },
+                        title: new Date(batch.createdAt).toISOString(),
+                        children: relTime(batch.createdAt)
+                    })
+                ]
+            }),
+            isExpanded && /*#__PURE__*/ _jsx("tr", {
+                children: /*#__PURE__*/ _jsx("td", {
+                    colSpan: colCount,
+                    style: {
+                        padding: 0,
+                        borderTop: 'none'
+                    },
+                    children: /*#__PURE__*/ _jsx(DrillDown, {
+                        basePath: basePath,
+                        batch: batch,
+                        onAfterAction: onAfterAction
+                    })
+                })
+            })
+        ]
+    });
+};