@purposeinplay/payload-ai-translate 0.1.0

package/dist/views/TranslationHub/BulkTranslateMonitor.js

@@ -0,0 +1,305 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { readResponseError } from '../shared/fetch-error-body.js';
+import { BulkTranslateFailureDrawer } from './BulkTranslateFailureDrawer.js';
+const SECTION_STYLE = {
+    background: 'var(--theme-elevation-50)',
+    border: '1px solid var(--theme-elevation-150)',
+    borderRadius: '6px',
+    padding: '1rem'
+};
+const PROGRESS_TRACK_STYLE = {
+    height: '8px',
+    background: 'var(--theme-elevation-100)',
+    borderRadius: '4px',
+    overflow: 'hidden'
+};
+const PROGRESS_TRACK_THIN_STYLE = {
+    ...PROGRESS_TRACK_STYLE,
+    height: '4px'
+};
+const COLLECTION_ROW_STYLE = {
+    display: 'grid',
+    gridTemplateColumns: '140px 1fr 100px',
+    gap: '0.75rem',
+    alignItems: 'center',
+    padding: '0.5rem 0',
+    fontSize: '0.8125rem',
+    borderTop: '1px solid var(--theme-elevation-100)'
+};
+const FAILURE_BADGE_STYLE = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '0.25rem',
+    padding: '0.15rem 0.45rem',
+    background: 'var(--theme-error-100, #fee2e2)',
+    border: '1px solid var(--theme-error-500, #b91c1c)',
+    borderRadius: '4px',
+    color: 'var(--theme-error-500, #b91c1c)',
+    fontSize: '0.75rem',
+    fontWeight: 500,
+    cursor: 'pointer'
+};
+/**
+ * Format an ETA seconds value to "~Nm" / "~Nh Mm". Exported for tests.
+ */ export function formatEta(seconds) {
+    if (seconds === null || seconds === undefined || !Number.isFinite(seconds)) {
+        return 'ETA pending';
+    }
+    if (seconds < 60) {
+        return `ETA ~${Math.max(1, Math.round(seconds))}s`;
+    }
+    if (seconds < 3600) {
+        return `ETA ~${Math.round(seconds / 60)}m`;
+    }
+    const h = Math.floor(seconds / 3600);
+    const m = Math.round((seconds - h * 3600) / 60);
+    return `ETA ~${h}h ${m}m`;
+}
+/**
+ * Cancellation interim copy (F-UX-04). Returns null when batch isn't
+ * cancelling so the UI can early-return.
+ */ export function deriveCancellationLabel(batch) {
+    if (batch.status !== 'cancelling') {
+        return null;
+    }
+    const stillRunning = batch.totalUnits - batch.completedUnits - batch.failedUnits;
+    return `Cancelling — ${Math.max(0, stillRunning)} jobs still finishing`;
+}
+export const BulkTranslateMonitor = ({ basePath, batch, isOffline, onRetry })=>{
+    const [drawerCollection, setDrawerCollection] = useState(null);
+    const [cancelling, setCancelling] = useState(false);
+    const [cancelError, setCancelError] = useState(null);
+    const totalProgress = batch.totalUnits === 0 ? 0 : Math.min(100, batch.completedUnits / batch.totalUnits * 100);
+    const cancelLabel = deriveCancellationLabel(batch);
+    async function onCancel() {
+        if (cancelling) {
+            return;
+        }
+        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));
+            }
+        } catch (e) {
+            setCancelError(e instanceof Error ? e.message : String(e));
+        } finally{
+            setCancelling(false);
+        }
+    }
+    return /*#__PURE__*/ _jsxs("section", {
+        "data-testid": "bulk-translate-monitor",
+        id: "bulk-translate-monitor",
+        style: SECTION_STYLE,
+        children: [
+            isOffline ? /*#__PURE__*/ _jsxs("div", {
+                "data-testid": "bulk-translate-offline-banner",
+                role: "status",
+                style: {
+                    marginBottom: '0.75rem',
+                    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", {
+                        onClick: onRetry,
+                        style: {
+                            background: 'transparent',
+                            border: 'none',
+                            color: 'inherit',
+                            textDecoration: 'underline',
+                            cursor: 'pointer',
+                            fontSize: 'inherit'
+                        },
+                        type: "button",
+                        children: "Retry now"
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ _jsxs("header", {
+                style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    marginBottom: '0.75rem',
+                    gap: '0.75rem'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ _jsx("h2", {
+                                style: {
+                                    margin: 0,
+                                    fontSize: '1rem',
+                                    color: 'var(--theme-elevation-1000)'
+                                },
+                                children: "Bulk translate in progress"
+                            }),
+                            /*#__PURE__*/ _jsxs("p", {
+                                style: {
+                                    margin: '0.15rem 0 0',
+                                    fontSize: '0.8125rem',
+                                    color: 'var(--theme-elevation-500)'
+                                },
+                                children: [
+                                    batch.completedUnits,
+                                    " / ",
+                                    batch.totalUnits,
+                                    " translated · ",
+                                    formatEta(batch.etaSeconds)
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        "aria-label": "Cancel bulk translate batch",
+                        disabled: cancelling || batch.status === 'cancelling',
+                        onClick: onCancel,
+                        style: {
+                            padding: '0.35rem 0.75rem',
+                            background: 'transparent',
+                            border: '1px solid var(--theme-elevation-300)',
+                            borderRadius: '4px',
+                            color: 'var(--theme-elevation-700)',
+                            cursor: cancelling || batch.status === 'cancelling' ? 'not-allowed' : 'pointer',
+                            fontSize: '0.8125rem'
+                        },
+                        type: "button",
+                        children: batch.status === 'cancelling' ? 'Cancelling…' : 'Cancel'
+                    })
+                ]
+            }),
+            cancelLabel ? /*#__PURE__*/ _jsx("p", {
+                "data-testid": "bulk-translate-cancelling",
+                style: {
+                    margin: '0 0 0.5rem',
+                    fontSize: '0.8125rem',
+                    color: 'var(--theme-warning-500, #d97706)'
+                },
+                children: cancelLabel
+            }) : null,
+            cancelError ? /*#__PURE__*/ _jsx("p", {
+                style: {
+                    margin: '0 0 0.5rem',
+                    fontSize: '0.8125rem',
+                    color: 'var(--theme-error-500, #b91c1c)'
+                },
+                children: cancelError
+            }) : null,
+            /*#__PURE__*/ _jsx("div", {
+                "aria-label": "Total bulk-translate progress",
+                "aria-valuemax": batch.totalUnits,
+                "aria-valuemin": 0,
+                "aria-valuenow": batch.completedUnits,
+                "data-testid": "bulk-translate-global-progress",
+                role: "progressbar",
+                style: PROGRESS_TRACK_STYLE,
+                children: /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        width: `${totalProgress}%`,
+                        height: '100%',
+                        background: 'var(--theme-success-500, #16a34a)',
+                        transition: 'width 250ms ease'
+                    }
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    marginTop: '0.75rem'
+                },
+                children: batch.collections.map((c)=>/*#__PURE__*/ _jsx(CollectionRow, {
+                        collection: c,
+                        onOpenFailures: ()=>setDrawerCollection(c)
+                    }, c.slug))
+            }),
+            drawerCollection ? /*#__PURE__*/ _jsx(BulkTranslateFailureDrawer, {
+                basePath: basePath,
+                batchId: batch.id,
+                batchStatus: batch.status,
+                collection: drawerCollection,
+                onClose: ()=>setDrawerCollection(null)
+            }) : null
+        ]
+    });
+};
+const CollectionRow = ({ collection, onOpenFailures })=>{
+    const pct = collection.total === 0 ? 0 : Math.min(100, collection.completed / collection.total * 100);
+    const hasFailures = collection.failed > 0;
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-testid": `bulk-translate-row-${collection.slug}`,
+        style: COLLECTION_ROW_STYLE,
+        children: [
+            /*#__PURE__*/ _jsx("span", {
+                style: {
+                    color: 'var(--theme-elevation-800)'
+                },
+                children: collection.label
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                "aria-label": `${collection.label} progress`,
+                "aria-valuemax": collection.total,
+                "aria-valuemin": 0,
+                "aria-valuenow": collection.completed,
+                role: "progressbar",
+                style: PROGRESS_TRACK_THIN_STYLE,
+                children: /*#__PURE__*/ _jsx("div", {
+                    style: {
+                        width: `${pct}%`,
+                        height: '100%',
+                        background: 'var(--theme-success-500, #16a34a)',
+                        transition: 'width 250ms ease'
+                    }
+                })
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    textAlign: 'right'
+                },
+                children: hasFailures ? /*#__PURE__*/ _jsxs("button", {
+                    "aria-label": `${collection.failed} failed translations in ${collection.label}, open failure list`,
+                    "data-testid": `bulk-translate-failures-${collection.slug}`,
+                    onClick: onOpenFailures,
+                    style: {
+                        ...FAILURE_BADGE_STYLE,
+                        background: 'var(--theme-error-100, #fee2e2)'
+                    },
+                    type: "button",
+                    children: [
+                        /*#__PURE__*/ _jsx("span", {
+                            "aria-hidden": "true",
+                            children: "⚠"
+                        }),
+                        /*#__PURE__*/ _jsxs("span", {
+                            children: [
+                                collection.failed,
+                                " failed"
+                            ]
+                        })
+                    ]
+                }) : /*#__PURE__*/ _jsx("span", {
+                    style: {
+                        color: 'var(--theme-elevation-500)',
+                        fontSize: '0.75rem'
+                    },
+                    children: "—"
+                })
+            })
+        ]
+    });
+};

package/dist/views/TranslationHub/BulkTranslateNarrowViewportBanner.d.ts

@@ -0,0 +1,3 @@
+import type React from 'react';
+export declare const BulkTranslateNarrowViewportBanner: React.FC;
+export declare const BULK_TRANSLATE_NARROW_BREAKPOINT_PX = 768;

package/dist/views/TranslationHub/BulkTranslateNarrowViewportBanner.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+/**
+ * Desktop-only declaration banner (F-UX-12). Bulk translate is a
+ * desktop workflow — the monitor's grid layout and the failure drawer
+ * assume keyboard + multiple columns. On narrow viewports we render
+ * an explicit "read-only on mobile" notice instead of hiding the
+ * surface entirely; admins can still SEE the monitor, just not drive
+ * it from a phone.
+ *
+ * Pure CSS media queries would hide it from view but wouldn't
+ * announce it to assistive tech. Component-driven gives us the SSR
+ * hydration-safe pattern + screen-reader announcement.
+ */ const BREAKPOINT_PX = 768;
+export const BulkTranslateNarrowViewportBanner = ()=>{
+    const [isNarrow, setIsNarrow] = useState(false);
+    useEffect(()=>{
+        const mq = window.matchMedia(`(max-width: ${BREAKPOINT_PX - 1}px)`);
+        const update = ()=>setIsNarrow(mq.matches);
+        update();
+        mq.addEventListener('change', update);
+        return ()=>mq.removeEventListener('change', update);
+    }, []);
+    if (!isNarrow) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx("div", {
+        "data-testid": "bulk-translate-narrow-banner",
+        role: "status",
+        style: {
+            padding: '0.75rem 1rem',
+            background: 'var(--theme-elevation-50)',
+            border: '1px solid var(--theme-elevation-150)',
+            borderRadius: '6px',
+            fontSize: '0.8125rem',
+            color: 'var(--theme-elevation-700)'
+        },
+        children: "Bulk translate is designed for desktop. The monitor below is read-only on mobile."
+    });
+};
+export const BULK_TRANSLATE_NARROW_BREAKPOINT_PX = BREAKPOINT_PX;

package/dist/views/TranslationHub/BulkTranslatePostEnqueueTransition.d.ts

@@ -0,0 +1,26 @@
+import type React from 'react';
+interface Props {
+    basePath: string;
+    /**
+     * Invoked when the first successful status poll returns. Parent uses
+     * this to close the transition and let the in-flight monitor (which
+     * subscribes to the same hook in `Hub.client.tsx`) take over the
+     * Overview tab.
+     */
+    onResolved: () => void;
+    /**
+     * Safety fallback: maximum time to keep the transition card mounted
+     * even if the poll never returns an active batch. Prevents the UI
+     * from being stuck in "queued" forever if the enqueue silently no-ops.
+     */
+    timeoutMs?: number;
+}
+/**
+ * Brief transition shown between modal-close and the first successful
+ * active-batch poll (F-UX-15). Without this, a 0-5 second window
+ * exists where the modal has closed but the in-flight monitor hasn't
+ * mounted yet, and the Overview tab looks identical to the idle state
+ * — admins reasonably worry the click was dropped.
+ */
+export declare const BulkTranslatePostEnqueueTransition: React.FC<Props>;
+export {};

package/dist/views/TranslationHub/BulkTranslatePostEnqueueTransition.js

@@ -0,0 +1,95 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { useBulkTranslateActive } from './useBulkTranslateActive.js';
+/**
+ * Brief transition shown between modal-close and the first successful
+ * active-batch poll (F-UX-15). Without this, a 0-5 second window
+ * exists where the modal has closed but the in-flight monitor hasn't
+ * mounted yet, and the Overview tab looks identical to the idle state
+ * — admins reasonably worry the click was dropped.
+ */ export const BulkTranslatePostEnqueueTransition = ({ basePath, onResolved, timeoutMs = 15_000 })=>{
+    const { data } = useBulkTranslateActive(basePath);
+    const resolvedRef = useRef(false);
+    // Resolve as soon as the active-batch endpoint reports a non-null
+    // batch — that's our signal the coordinator picked up the enqueue.
+    useEffect(()=>{
+        if (resolvedRef.current) {
+            return;
+        }
+        if (data?.batch) {
+            resolvedRef.current = true;
+            onResolved();
+        }
+    }, [
+        data,
+        onResolved
+    ]);
+    // Safety timeout — if the active endpoint never returns a batch
+    // (consumer integration error, endpoint not deployed, etc.) we
+    // still close the transition so the user isn't stuck.
+    useEffect(()=>{
+        const timer = setTimeout(()=>{
+            if (!resolvedRef.current) {
+                resolvedRef.current = true;
+                onResolved();
+            }
+        }, timeoutMs);
+        return ()=>clearTimeout(timer);
+    }, [
+        onResolved,
+        timeoutMs
+    ]);
+    return /*#__PURE__*/ _jsx("div", {
+        "data-testid": "bulk-translate-post-enqueue",
+        style: {
+            position: 'fixed',
+            inset: 0,
+            background: 'rgba(0,0,0,0.45)',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            zIndex: 220
+        },
+        children: /*#__PURE__*/ _jsxs("div", {
+            "aria-live": "polite",
+            role: "status",
+            style: {
+                background: 'var(--theme-elevation-0)',
+                border: '1px solid var(--theme-elevation-150)',
+                borderRadius: '6px',
+                padding: '1.5rem 2rem',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0.75rem',
+                color: 'var(--theme-elevation-1000)',
+                fontSize: '0.875rem'
+            },
+            children: [
+                /*#__PURE__*/ _jsx("span", {
+                    "aria-hidden": "true",
+                    style: {
+                        display: 'inline-block',
+                        width: '14px',
+                        height: '14px',
+                        border: '2px solid var(--theme-elevation-300)',
+                        borderTopColor: 'var(--theme-elevation-700)',
+                        borderRadius: '50%',
+                        animation: 'bulk-translate-spin 800ms linear infinite'
+                    }
+                }),
+                /*#__PURE__*/ _jsx("span", {
+                    children: "Run queued, monitor starting…"
+                }),
+                /*#__PURE__*/ _jsx("style", {
+                    children: `
+          @keyframes bulk-translate-spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+          }
+        `
+                })
+            ]
+        })
+    });
+};

package/dist/views/TranslationHub/BulkTranslatePreflightModal.d.ts

@@ -0,0 +1,22 @@
+import type React from 'react';
+import type { BulkTranslatePreflightResponse } from './BulkTranslate.types.js';
+interface Props {
+    basePath: string;
+    onClose: () => void;
+}
+type CostState = {
+    kind: 'loading';
+} | {
+    kind: 'timeout';
+} | {
+    kind: 'ready';
+    value: number;
+} | {
+    kind: 'unavailable';
+};
+/** Pure helper, exported for tests. */
+export declare function deriveCostState(preflight: BulkTranslatePreflightResponse | null, timedOut: boolean): CostState;
+/** Pure helper, exported for tests. */
+export declare function isCapBlocked(preflight: BulkTranslatePreflightResponse | null): boolean;
+export declare const BulkTranslatePreflightModal: React.FC<Props>;
+export {};