@purposeinplay/payload-ai-translate 0.1.0

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

@@ -0,0 +1,29 @@
+import type React from 'react';
+import type { BulkTranslateBatchSummary } from './BulkTranslate.types.js';
+interface Props {
+    basePath: string;
+    batch: BulkTranslateBatchSummary;
+    onDismiss: () => void;
+    /** Refresh handler after a successful revert — refetch active state. */
+    onAfterRevert?: () => void;
+}
+type Variant = 'success' | 'partial' | 'all-failed' | 'reverted' | 'cancelled';
+/**
+ * Derive the terminal-card variant from a batch's status + counts.
+ * Exported for unit tests so we don't have to thread a full
+ * BulkTranslateBatchSummary through every assertion.
+ */
+export declare function deriveVariant(batch: Pick<BulkTranslateBatchSummary, 'status' | 'completedUnits' | 'failedUnits'>): Variant;
+/**
+ * Returns true when the batch is still inside the 24-hour revert
+ * window. Exported for tests.
+ */
+export declare function canRevert(batch: Pick<BulkTranslateBatchSummary, 'revertExpiresAt' | 'revertedAt'>, now?: Date): boolean;
+export declare const BulkTranslateTerminalCard: React.FC<Props>;
+export declare const RevertConfirmModal: React.FC<{
+    basePath: string;
+    batchId: string;
+    onClose: () => void;
+    onSuccess: () => void;
+}>;
+export {};

package/dist/views/TranslationHub/BulkTranslateTerminalCard.js

@@ -0,0 +1,445 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef, useState } from 'react';
+import { readResponseError } from '../shared/fetch-error-body.js';
+import { formatCost } from '../shared/format.js';
+import { useFocusTrap } from './useFocusTrap.js';
+/**
+ * Derive the terminal-card variant from a batch's status + counts.
+ * Exported for unit tests so we don't have to thread a full
+ * BulkTranslateBatchSummary through every assertion.
+ */ export function deriveVariant(batch) {
+    if (batch.status === 'reverted') {
+        return 'reverted';
+    }
+    if (batch.status === 'cancelled') {
+        return 'cancelled';
+    }
+    if (batch.status === 'failed' || batch.completedUnits === 0) {
+        return 'all-failed';
+    }
+    if (batch.failedUnits > 0) {
+        return 'partial';
+    }
+    return 'success';
+}
+/**
+ * Returns true when the batch is still inside the 24-hour revert
+ * window. Exported for tests.
+ */ export function canRevert(batch, now = new Date()) {
+    if (batch.revertedAt) {
+        return false;
+    }
+    if (!batch.revertExpiresAt) {
+        return false;
+    }
+    return new Date(batch.revertExpiresAt).getTime() > now.getTime();
+}
+const SECTION_STYLE = {
+    background: 'var(--theme-elevation-50)',
+    border: '1px solid var(--theme-elevation-150)',
+    borderRadius: '6px',
+    padding: '1rem'
+};
+const VARIANT_TONE = {
+    success: {
+        fg: 'var(--theme-success-500, #16a34a)',
+        icon: '✓',
+        label: 'Bulk run complete'
+    },
+    partial: {
+        fg: 'var(--theme-warning-500, #d97706)',
+        icon: '⚠',
+        label: 'Bulk run complete with failures'
+    },
+    'all-failed': {
+        fg: 'var(--theme-error-500, #b91c1c)',
+        icon: '✗',
+        label: 'Bulk run failed'
+    },
+    reverted: {
+        fg: 'var(--theme-elevation-700)',
+        icon: '↶',
+        label: 'Bulk run reverted'
+    },
+    cancelled: {
+        fg: 'var(--theme-elevation-700)',
+        icon: '○',
+        label: 'Bulk run cancelled'
+    }
+};
+export const BulkTranslateTerminalCard = ({ basePath, batch, onDismiss, onAfterRevert })=>{
+    const variant = deriveVariant(batch);
+    const tone = VARIANT_TONE[variant];
+    const [revertOpen, setRevertOpen] = useState(false);
+    const showRevert = canRevert(batch);
+    return /*#__PURE__*/ _jsxs("section", {
+        "data-testid": `bulk-translate-terminal-${variant}`,
+        style: SECTION_STYLE,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    justifyContent: 'space-between',
+                    gap: '0.75rem'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        children: [
+                            /*#__PURE__*/ _jsxs("h2", {
+                                style: {
+                                    margin: 0,
+                                    fontSize: '1rem',
+                                    color: tone.fg,
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '0.4rem'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        "aria-hidden": "true",
+                                        children: tone.icon
+                                    }),
+                                    " ",
+                                    tone.label
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("p", {
+                                style: {
+                                    margin: '0.4rem 0 0',
+                                    fontSize: '0.8125rem',
+                                    color: 'var(--theme-elevation-700)'
+                                },
+                                children: [
+                                    batch.completedUnits,
+                                    " succeeded · ",
+                                    batch.failedUnits,
+                                    " failed",
+                                    typeof batch.actualCostUsd === 'number' ? ` · ~${formatCost(batch.actualCostUsd)}` : ''
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        "aria-label": "Dismiss bulk run summary",
+                        onClick: onDismiss,
+                        style: {
+                            background: 'transparent',
+                            border: 'none',
+                            color: 'var(--theme-elevation-500)',
+                            fontSize: '1.25rem',
+                            lineHeight: 1,
+                            cursor: 'pointer',
+                            padding: 0
+                        },
+                        type: "button",
+                        children: "×"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    marginTop: '0.75rem',
+                    display: 'flex',
+                    gap: '0.75rem',
+                    flexWrap: 'wrap'
+                },
+                children: [
+                    variant === 'partial' ? /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx("a", {
+                                href: "#bulk-translate-monitor",
+                                style: {
+                                    color: 'var(--theme-elevation-700)',
+                                    fontSize: '0.8125rem'
+                                },
+                                children: "View failed jobs →"
+                            }),
+                            /*#__PURE__*/ _jsx(RetryFailedLink, {
+                                basePath: basePath,
+                                batchId: batch.id
+                            })
+                        ]
+                    }) : null,
+                    variant === 'all-failed' ? /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx("a", {
+                                href: "#bulk-translate-monitor",
+                                style: {
+                                    color: 'var(--theme-error-500, #b91c1c)',
+                                    fontSize: '0.8125rem'
+                                },
+                                children: "Open first failure →"
+                            }),
+                            /*#__PURE__*/ _jsx(RetryFailedLink, {
+                                basePath: basePath,
+                                batchId: batch.id
+                            })
+                        ]
+                    }) : null,
+                    showRevert && variant !== 'reverted' ? /*#__PURE__*/ _jsx("button", {
+                        "data-testid": "bulk-translate-revert-open",
+                        onClick: ()=>setRevertOpen(true),
+                        style: {
+                            background: 'transparent',
+                            border: '1px solid var(--theme-elevation-300)',
+                            borderRadius: '4px',
+                            padding: '0.25rem 0.6rem',
+                            color: 'var(--theme-elevation-1000)',
+                            fontSize: '0.8125rem',
+                            cursor: 'pointer'
+                        },
+                        type: "button",
+                        children: "Revert this batch"
+                    }) : null
+                ]
+            }),
+            revertOpen ? /*#__PURE__*/ _jsx(RevertConfirmModal, {
+                basePath: basePath,
+                batchId: batch.id,
+                onClose: ()=>setRevertOpen(false),
+                onSuccess: ()=>{
+                    setRevertOpen(false);
+                    onAfterRevert?.();
+                }
+            }) : null
+        ]
+    });
+};
+const RetryFailedLink = ({ basePath, batchId })=>{
+    const [busy, setBusy] = useState(false);
+    const [err, setErr] = useState(null);
+    async function onClick() {
+        setBusy(true);
+        try {
+            const res = await fetch(`${basePath}/api/translation-hub/bulk-translate/${batchId}/retry`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    allFailed: true
+                })
+            });
+            if (!res.ok) {
+                throw new Error(await readResponseError(res));
+            }
+        } catch (e) {
+            setErr(e instanceof Error ? e.message : String(e));
+        } finally{
+            setBusy(false);
+        }
+    }
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("button", {
+                "data-testid": "bulk-translate-retry-all-failed",
+                disabled: busy,
+                onClick: onClick,
+                style: {
+                    background: 'transparent',
+                    border: '1px solid var(--theme-elevation-300)',
+                    borderRadius: '4px',
+                    padding: '0.25rem 0.6rem',
+                    color: 'var(--theme-elevation-1000)',
+                    fontSize: '0.8125rem',
+                    cursor: busy ? 'not-allowed' : 'pointer'
+                },
+                type: "button",
+                children: busy ? 'Retrying…' : 'Retry All Failed'
+            }),
+            err ? /*#__PURE__*/ _jsx("span", {
+                style: {
+                    color: 'var(--theme-error-500, #b91c1c)',
+                    fontSize: '0.75rem'
+                },
+                children: err
+            }) : null
+        ]
+    });
+};
+export const RevertConfirmModal = ({ basePath, batchId, onClose, onSuccess })=>{
+    const ref = useRef(null);
+    const [totp, setTotp] = useState('');
+    const [busy, setBusy] = useState(false);
+    const [err, setErr] = useState(null);
+    useFocusTrap(ref, {
+        enabled: true,
+        onEscape: onClose
+    });
+    async function onConfirm() {
+        setBusy(true);
+        setErr(null);
+        try {
+            const res = await fetch(`${basePath}/api/translation-hub/bulk-translate/${batchId}/revert`, {
+                method: 'POST',
+                credentials: 'include',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    totp
+                })
+            });
+            if (!res.ok) {
+                const body = await res.json().catch(()=>null);
+                throw new Error(body?.error ?? `HTTP ${res.status}`);
+            }
+            onSuccess();
+        } catch (e) {
+            setErr(e instanceof Error ? e.message : String(e));
+        } finally{
+            setBusy(false);
+        }
+    }
+    return /*#__PURE__*/ _jsx("div", {
+        onClick: (e)=>{
+            if (e.target === e.currentTarget) {
+                onClose();
+            }
+        },
+        style: {
+            position: 'fixed',
+            inset: 0,
+            background: 'rgba(0,0,0,0.45)',
+            display: 'flex',
+            alignItems: 'flex-start',
+            justifyContent: 'center',
+            paddingTop: '4rem',
+            zIndex: 210
+        },
+        children: /*#__PURE__*/ _jsxs("div", {
+            "aria-describedby": "bulk-translate-revert-desc",
+            "aria-labelledby": "bulk-translate-revert-title",
+            "aria-modal": "true",
+            ref: ref,
+            role: "dialog",
+            style: {
+                width: '100%',
+                maxWidth: '420px',
+                background: 'var(--theme-elevation-0)',
+                border: '1px solid var(--theme-elevation-150)',
+                borderRadius: '6px',
+                padding: '1.25rem'
+            },
+            children: [
+                /*#__PURE__*/ _jsx("h3", {
+                    id: "bulk-translate-revert-title",
+                    style: {
+                        margin: 0,
+                        fontSize: '1rem',
+                        color: 'var(--theme-elevation-1000)'
+                    },
+                    children: "Revert this batch?"
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    id: "bulk-translate-revert-desc",
+                    style: {
+                        margin: '0.5rem 0 0.75rem',
+                        color: 'var(--theme-elevation-700)',
+                        fontSize: '0.8125rem'
+                    },
+                    children: "Restores pre-run snapshots for every translated locale row in this batch. Newer manual edits will be overwritten."
+                }),
+                /*#__PURE__*/ _jsx("label", {
+                    htmlFor: "bulk-translate-revert-totp",
+                    style: {
+                        display: 'block',
+                        fontSize: '0.6875rem',
+                        fontWeight: 600,
+                        textTransform: 'uppercase',
+                        letterSpacing: '0.05em',
+                        color: 'var(--theme-elevation-500)',
+                        margin: '0 0 0.35rem'
+                    },
+                    children: "Authentication code"
+                }),
+                /*#__PURE__*/ _jsx("input", {
+                    "aria-describedby": "bulk-translate-revert-totp-hint",
+                    autoComplete: "one-time-code",
+                    id: "bulk-translate-revert-totp",
+                    inputMode: "numeric",
+                    maxLength: 6,
+                    onChange: (e)=>setTotp(e.target.value.replace(/\D/g, '').slice(0, 6)),
+                    pattern: "[0-9]{6}",
+                    // NEW-22 (v1.2.6): "000000" looked like a submittable default;
+                    // a label that names the *format* tells the editor what to
+                    // enter without implying any value is acceptable.
+                    placeholder: "6-digit code",
+                    style: {
+                        width: '100%',
+                        padding: '0.4rem 0.6rem',
+                        background: 'var(--theme-elevation-0)',
+                        border: '1px solid var(--theme-elevation-300)',
+                        borderRadius: '4px',
+                        fontSize: '0.875rem',
+                        fontFamily: 'inherit',
+                        color: 'var(--theme-elevation-1000)'
+                    },
+                    type: "text",
+                    value: totp
+                }),
+                /*#__PURE__*/ _jsx("p", {
+                    id: "bulk-translate-revert-totp-hint",
+                    style: {
+                        margin: '0.35rem 0 0',
+                        fontSize: '0.6875rem',
+                        color: 'var(--theme-elevation-500)'
+                    },
+                    children: "Enter the 6-digit code from your authenticator app."
+                }),
+                err ? /*#__PURE__*/ _jsx("p", {
+                    style: {
+                        color: 'var(--theme-error-500, #b91c1c)',
+                        fontSize: '0.8125rem',
+                        marginTop: '0.5rem'
+                    },
+                    children: err
+                }) : null,
+                /*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                        gap: '0.5rem',
+                        marginTop: '1rem'
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx("button", {
+                            onClick: onClose,
+                            style: {
+                                padding: '0.4rem 0.85rem',
+                                background: 'transparent',
+                                border: 'none',
+                                color: 'var(--theme-elevation-700)',
+                                cursor: 'pointer',
+                                fontSize: '0.8125rem'
+                            },
+                            type: "button",
+                            children: "Cancel"
+                        }),
+                        /*#__PURE__*/ _jsx("button", {
+                            "data-testid": "bulk-translate-revert-confirm",
+                            disabled: busy || totp.length !== 6,
+                            onClick: onConfirm,
+                            style: {
+                                padding: '0.4rem 0.85rem',
+                                background: 'var(--theme-error-500, #b91c1c)',
+                                border: '1px solid var(--theme-error-500, #b91c1c)',
+                                borderRadius: '4px',
+                                color: '#ffffff',
+                                cursor: busy || totp.length !== 6 ? 'not-allowed' : 'pointer',
+                                opacity: busy || totp.length !== 6 ? 0.5 : 1,
+                                fontSize: '0.8125rem',
+                                fontWeight: 600
+                            },
+                            type: "button",
+                            children: busy ? 'Reverting…' : 'Revert batch'
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};

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

@@ -0,0 +1,66 @@
+import type React from 'react';
+/**
+ * Tristate trigger surfaced in the Overview tab header.
+ *
+ * Per F-DA-LOADING-FLICKER / N8, this component MUST render a skeleton
+ * (NOT the actual button) until the active-run state resolves. If we
+ * rendered the button straight away, a 100-500ms window exists where
+ * an admin can double-click during the active-batch lookup and bypass
+ * the "refuse second click" rule.
+ *
+ * Render states:
+ *  - `loading` (data === null && loading): 90×30px elevation-100 block.
+ *  - `active-run` (batch exists + status active): status chip linking
+ *    to the monitor anchor below.
+ *  - `idle` (no active batch): outline "Bulk Translate" button that
+ *    opens the pre-flight modal.
+ */
+interface Props {
+    basePath: string;
+    /** Mirrored from `Hub.client.tsx` — passed to the modal for fetches. */
+    monitorAnchorId?: string;
+    /**
+     * 1.2.8: current viewer's user id (stringified). When an active
+     * batch's `triggeredByUserId` doesn't match, the chip shows the
+     * owner's email — "Bulk run by alice@… — 3/12 complete" — so the
+     * editor knows whose run they're seeing and can decide whether to
+     * wait or ping. Omitted on legacy admin-only callsites; defaults to
+     * the pre-1.2.8 generic copy.
+     */
+    currentUserId?: string | null;
+}
+type DerivedState = {
+    kind: 'loading';
+} | {
+    kind: 'active-run';
+    label: string;
+    href: string;
+} | {
+    kind: 'idle';
+};
+/**
+ * Pure derivation — exported for unit tests so the tristate logic can
+ * be exercised without React.
+ *
+ * 1.2.8: also surfaces attribution when the active batch was started
+ * by a different user. The label switches from a generic
+ * "Bulk run in progress" to "Bulk run by alice@…" so editors can
+ * tell at a glance whose run is occupying the queue without
+ * navigating into the monitor card.
+ */
+export declare function deriveTriggerState(args: {
+    loading: boolean;
+    data: {
+        batch: {
+            status: string;
+            completedUnits: number;
+            totalUnits: number;
+            triggeredByUserId?: string | number | null;
+            triggeredByEmail?: string | null;
+        } | null;
+    } | null;
+    monitorAnchorId?: string;
+    currentUserId?: string | null;
+}): DerivedState;
+export declare const BulkTranslateTrigger: React.FC<Props>;
+export {};