@purposeinplay/payload-ai-translate 0.1.0

package/dist/views/BulkRunsHub/BulkRunsHub.client.d.ts

@@ -0,0 +1,18 @@
+import type React from 'react';
+interface BulkRunsHubClientProps {
+    /**
+     * 1.2.8: viewer role. Editors see the same table layout, but the
+     * action menu on each row (cancel / retry / revert) is hidden on
+     * rows where `triggeredByUserId !== currentUserId`. Cost / token /
+     * model fields are absent from the response (server-side field
+     * masking on the batches collection) so the editor variant of the
+     * row simply has fewer columns; no client-side filtering needed.
+     */
+    role?: 'admin' | 'editor';
+    /** 1.2.8: current user id (stringified). Used for ownership chip. */
+    currentUserId?: string | null;
+    /** 1.2.8: current user email. Used in modal copy. */
+    currentUserEmail?: string | null;
+}
+export declare const BulkRunsHubClient: React.FC<BulkRunsHubClientProps>;
+export {};

package/dist/views/BulkRunsHub/BulkRunsHub.client.js

@@ -0,0 +1,331 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { BatchRow } from './BatchRow.js';
+import { EmptyState } from './EmptyState.js';
+import { dateRangeInvalid, FilterBar } from './FilterBar.js';
+import { InFlightBanner } from './InFlightBanner.js';
+import { StatusBadgeKeyframes } from './StatusBadge.js';
+import { SummaryStrip } from './SummaryStrip.js';
+import { useBulkRunsList } from './useBulkRunsList.js';
+import { DEFAULT_FILTERS, useUrlFilters } from './useUrlFilters.js';
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function getBasePath() {
+    if (typeof window === 'undefined') return '';
+    const idx = window.location.pathname.indexOf('/admin/');
+    return idx > 0 ? window.location.pathname.slice(0, idx) : '';
+}
+const TABLE_COL_COUNT = 7;
+const TH_STYLE = {
+    textAlign: 'left',
+    padding: '0.5rem 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'
+};
+export const BulkRunsHubClient = ({ role = 'admin', currentUserId = null, currentUserEmail = null })=>{
+    // 1.2.8: pre-mark currently unused identity props for future
+    // table-row gating (Phase 6). Reference them here so the linter
+    // doesn't flag them as dead.
+    void currentUserId;
+    void currentUserEmail;
+    void role;
+    const basePath = useMemo(getBasePath, []);
+    // BR-7 (v1.2.6): filter + time-range state live in the URL so the
+    // view is refresh-stable and shareable. `useUrlFilters` reads from
+    // `useSearchParams()` and writes via `router.replace({ scroll: false })`.
+    const { filters, timeRange, setFilters, setTimeRange } = useUrlFilters();
+    const [expandedBatchId, setExpandedBatchId] = useState(null);
+    // NEW-19 (v1.2.6): if Since > Until, the filter is illogical — we
+    // pass DEFAULT_FILTERS to the table hook to avoid sending a bad
+    // request and surface an explanation alongside the inline message
+    // that FilterBar renders.
+    const invalidDates = dateRangeInvalid(filters);
+    const effectiveTableFilters = invalidDates ? DEFAULT_FILTERS : filters;
+    const { data, loading, error, isOffline, refetch, loadMore, loadingMore } = useBulkRunsList(basePath, effectiveTableFilters);
+    // BR-6 (v1.2.6): the SummaryStrip KPIs above the table are scoped to
+    // the time-range pill, NOT the table filter. Before, clicking the
+    // "Failed" status pill silently re-pointed the "Last 7 days cost"
+    // card at filtered-only-failed rows ($0.00) while the caption kept
+    // claiming "Last 7 days". Decoupling means a second `useBulkRunsList`
+    // call with no filters so the KPIs stay tied to the window.
+    // Polling cost is the same shape (one extra GET per 5s tick); the
+    // table-filtered list still drives the batch rows.
+    const { data: unfilteredData } = useBulkRunsList(basePath, DEFAULT_FILTERS);
+    const batches = data?.batches ?? [];
+    const total = data?.total ?? 0;
+    const unfilteredBatches = unfilteredData?.batches ?? [];
+    const unfilteredTotal = unfilteredData?.total ?? 0;
+    function patchFilters(patch) {
+        setFilters(patch);
+        // When filters change, collapse any open row so the user isn't looking
+        // at stale drill-down data.
+        setExpandedBatchId(null);
+    }
+    function toggleExpanded(batchId) {
+        setExpandedBatchId((prev)=>prev === batchId ? null : batchId);
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            padding: '1.5rem 2rem',
+            maxWidth: '1400px',
+            margin: '0 auto'
+        },
+        children: [
+            /*#__PURE__*/ _jsx(StatusBadgeKeyframes, {}),
+            /*#__PURE__*/ _jsxs("header", {
+                style: {
+                    marginBottom: '1.5rem'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            display: 'flex',
+                            alignItems: 'baseline',
+                            justifyContent: 'space-between',
+                            marginBottom: '0.25rem'
+                        },
+                        children: /*#__PURE__*/ _jsx("h1", {
+                            style: {
+                                fontSize: '1.5rem',
+                                margin: 0,
+                                color: 'var(--theme-elevation-1000)'
+                            },
+                            children: "Translation Runs"
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        style: {
+                            margin: 0,
+                            color: 'var(--theme-elevation-500)',
+                            fontSize: '0.875rem'
+                        },
+                        children: "History and status of every bulk translate batch. Click a row to drill into per-unit detail."
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("main", {
+                style: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '1rem'
+                },
+                children: [
+                    isOffline && /*#__PURE__*/ _jsxs("div", {
+                        role: "status",
+                        style: {
+                            padding: '0.5rem 0.75rem',
+                            background: 'var(--theme-warning-100, #fef3c7)',
+                            border: '1px solid var(--theme-warning-500, #d97706)',
+                            borderRadius: '4px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            fontSize: '0.8125rem',
+                            color: 'var(--theme-warning-500, #d97706)'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                children: "Connection lost — data may be stale"
+                            }),
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: refetch,
+                                style: {
+                                    background: 'transparent',
+                                    border: 'none',
+                                    color: 'inherit',
+                                    textDecoration: 'underline',
+                                    cursor: 'pointer',
+                                    fontSize: 'inherit'
+                                },
+                                children: "Retry now"
+                            })
+                        ]
+                    }),
+                    error && /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            padding: '0.75rem 1rem',
+                            background: 'var(--theme-error-100, #fee2e2)',
+                            border: '1px solid var(--theme-error-500, #b91c1c)',
+                            borderRadius: '4px',
+                            color: 'var(--theme-error-500, #b91c1c)',
+                            fontSize: '0.875rem'
+                        },
+                        children: [
+                            "Failed to load runs: ",
+                            error
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(SummaryStrip, {
+                        batches: unfilteredBatches,
+                        total: unfilteredTotal,
+                        timeRange: timeRange,
+                        onTimeRangeChange: setTimeRange,
+                        hasCustomDateFilter: Boolean(filters.since || filters.until)
+                    }),
+                    /*#__PURE__*/ _jsx(InFlightBanner, {
+                        batches: batches
+                    }),
+                    /*#__PURE__*/ _jsx(FilterBar, {
+                        filters: filters,
+                        onChange: patchFilters,
+                        batches: batches
+                    }),
+                    loading && /*#__PURE__*/ _jsx("div", {
+                        role: "status",
+                        "aria-live": "polite",
+                        style: {
+                            padding: '2rem',
+                            textAlign: 'center',
+                            color: 'var(--theme-elevation-500)',
+                            fontSize: '0.875rem'
+                        },
+                        children: "Loading runs…"
+                    }),
+                    !loading && !invalidDates && total === 0 && !error && /*#__PURE__*/ _jsx(EmptyState, {
+                        basePath: basePath
+                    }),
+                    !loading && !invalidDates && batches.length > 0 && /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            background: 'var(--theme-elevation-50)',
+                            border: '1px solid var(--theme-elevation-150)',
+                            borderRadius: '6px',
+                            overflow: 'hidden'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    overflowX: 'auto'
+                                },
+                                children: /*#__PURE__*/ _jsxs("table", {
+                                    style: {
+                                        width: '100%',
+                                        borderCollapse: 'collapse',
+                                        fontSize: '0.875rem',
+                                        color: 'var(--theme-elevation-800)'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx("thead", {
+                                            children: /*#__PURE__*/ _jsxs("tr", {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        style: {
+                                                            ...TH_STYLE,
+                                                            width: '140px'
+                                                        },
+                                                        children: "Status"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        style: {
+                                                            ...TH_STYLE,
+                                                            minWidth: '160px'
+                                                        },
+                                                        children: "Batch / trigger"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        style: {
+                                                            ...TH_STYLE,
+                                                            width: '120px'
+                                                        },
+                                                        children: "Mode"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        style: {
+                                                            ...TH_STYLE,
+                                                            width: '160px'
+                                                        },
+                                                        children: "Progress"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        style: {
+                                                            ...TH_STYLE,
+                                                            width: '80px',
+                                                            textAlign: 'right'
+                                                        },
+                                                        children: "Cost"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        style: {
+                                                            ...TH_STYLE,
+                                                            width: '70px',
+                                                            textAlign: 'right'
+                                                        },
+                                                        title: "Wallclock between when the worker first picked up the batch and when the last unit landed. Includes queue waits — for active-work time expand a row.",
+                                                        children: "Wallclock"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("th", {
+                                                        style: {
+                                                            ...TH_STYLE,
+                                                            width: '90px',
+                                                            textAlign: 'right'
+                                                        },
+                                                        children: "When"
+                                                    })
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ _jsx("tbody", {
+                                            children: batches.map((batch)=>/*#__PURE__*/ _jsx(BatchRow, {
+                                                    basePath: basePath,
+                                                    batch: batch,
+                                                    isExpanded: expandedBatchId === batch.id,
+                                                    onToggle: ()=>toggleExpanded(batch.id),
+                                                    onAfterAction: refetch,
+                                                    colCount: TABLE_COL_COUNT
+                                                }, batch.id))
+                                        })
+                                    ]
+                                })
+                            }),
+                            data?.nextCursor && /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    padding: '0.75rem 1rem',
+                                    borderTop: '1px solid var(--theme-elevation-100)',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '0.75rem'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("button", {
+                                        type: "button",
+                                        disabled: loadingMore,
+                                        onClick: ()=>loadMore(),
+                                        style: {
+                                            padding: '0.35rem 0.85rem',
+                                            background: 'transparent',
+                                            border: '1px solid var(--theme-elevation-300)',
+                                            borderRadius: '4px',
+                                            color: 'var(--theme-elevation-800)',
+                                            fontSize: '0.8125rem',
+                                            cursor: loadingMore ? 'not-allowed' : 'pointer'
+                                        },
+                                        children: loadingMore ? 'Loading…' : 'Load more'
+                                    }),
+                                    /*#__PURE__*/ _jsxs("span", {
+                                        style: {
+                                            fontSize: '0.75rem',
+                                            color: 'var(--theme-elevation-500)'
+                                        },
+                                        children: [
+                                            "Showing ",
+                                            batches.length,
+                                            " of ",
+                                            total
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};

package/dist/views/BulkRunsHub/EmptyState.d.ts

@@ -0,0 +1,6 @@
+import type React from 'react';
+interface Props {
+    basePath: string;
+}
+export declare const EmptyState: React.FC<Props>;
+export {};

package/dist/views/BulkRunsHub/EmptyState.js

@@ -0,0 +1,64 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const EmptyState = ({ basePath })=>/*#__PURE__*/ _jsxs("div", {
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: '4rem 2rem',
+            textAlign: 'center',
+            background: 'var(--theme-elevation-50)',
+            border: '1px solid var(--theme-elevation-150)',
+            borderRadius: '6px'
+        },
+        children: [
+            /*#__PURE__*/ _jsx("p", {
+                style: {
+                    fontSize: '2rem',
+                    margin: '0 0 0.5rem',
+                    color: 'var(--theme-elevation-300)',
+                    lineHeight: 1,
+                    userSelect: 'none'
+                },
+                "aria-hidden": "true",
+                children: "○"
+            }),
+            /*#__PURE__*/ _jsx("h2", {
+                style: {
+                    margin: '0 0 0.5rem',
+                    fontSize: '1rem',
+                    fontWeight: 600,
+                    color: 'var(--theme-elevation-1000)'
+                },
+                children: "No bulk translate runs yet."
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                style: {
+                    margin: '0 0 1.25rem',
+                    fontSize: '0.875rem',
+                    color: 'var(--theme-elevation-500)',
+                    maxWidth: '360px',
+                    lineHeight: 1.5
+                },
+                children: "Start a bulk run from the Translation Hub overview tab to translate all content in a collection at once."
+            }),
+            /*#__PURE__*/ _jsx("a", {
+                href: `${basePath}/admin/translation`,
+                style: {
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: '0.25rem',
+                    padding: '0.4rem 0.85rem',
+                    background: 'transparent',
+                    border: '1px solid var(--theme-elevation-300)',
+                    borderRadius: '4px',
+                    color: 'var(--theme-elevation-800)',
+                    fontSize: '0.8125rem',
+                    textDecoration: 'none',
+                    fontWeight: 500
+                },
+                children: "Go to Translation Hub →"
+            })
+        ]
+    });

package/dist/views/BulkRunsHub/FilterBar.d.ts

@@ -0,0 +1,16 @@
+import type React from 'react';
+import type { BulkRunsFilterState, BulkTranslateBatchSummary } from '../TranslationHub/BulkTranslate.types.js';
+/**
+ * NEW-19 (v1.2.6): true when both Since and Until are set but Until
+ * precedes Since. Pure helper so the inline error / aria-invalid /
+ * input min-max can all read the same source of truth.
+ */
+export declare function dateRangeInvalid(filters: BulkRunsFilterState): boolean;
+interface Props {
+    filters: BulkRunsFilterState;
+    onChange: (patch: Partial<BulkRunsFilterState>) => void;
+    /** Loaded batches — used to build the triggered-by autocomplete list. */
+    batches: BulkTranslateBatchSummary[];
+}
+export declare const FilterBar: React.FC<Props>;
+export {};