@purposeinplay/payload-ai-translate 0.1.0

package/dist/views/TranslationHub/BulkTranslateTrigger.js

@@ -0,0 +1,161 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useGlobalKillSwitches } from '../../client/lib/use-global-kill-switches.js';
+import { isActiveStatus } from './BulkTranslate.types.js';
+import { BulkTranslatePreflightModal } from './BulkTranslatePreflightModal.js';
+import { useBulkTranslateActive } from './useBulkTranslateActive.js';
+const SKELETON_STYLE = {
+    width: '120px',
+    height: '30px',
+    background: 'var(--theme-elevation-100)',
+    borderRadius: '4px',
+    // Visual hint that this is a placeholder, not interactive. No
+    // animation library — keyframe lives in the global Payload theme
+    // (`--theme-pulse-*`) and the simple opacity transition below is a
+    // reasonable cross-theme fallback.
+    opacity: 0.7
+};
+const CHIP_STYLE = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '0.5rem',
+    padding: '0.4rem 0.75rem',
+    borderRadius: '4px',
+    background: 'var(--theme-warning-100, #fef3c7)',
+    border: '1px solid var(--theme-warning-500, #d97706)',
+    color: 'var(--theme-warning-500, #d97706)',
+    fontSize: '0.8125rem',
+    fontWeight: 500,
+    textDecoration: 'none'
+};
+const BUTTON_STYLE = {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '0.5rem',
+    padding: '0.4rem 0.85rem',
+    background: 'transparent',
+    border: '1px solid var(--theme-elevation-300)',
+    borderRadius: '4px',
+    color: 'var(--theme-elevation-1000)',
+    fontSize: '0.8125rem',
+    fontWeight: 500,
+    cursor: 'pointer'
+};
+/**
+ * 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 function deriveTriggerState(args) {
+    const { loading, data, monitorAnchorId, currentUserId } = args;
+    // Initial-load skeleton (closes N8 / F-DA-LOADING-FLICKER window).
+    if (loading || data === null) {
+        return {
+            kind: 'loading'
+        };
+    }
+    const batch = data.batch;
+    if (batch && isActiveStatus(batch.status)) {
+        const completed = batch.completedUnits ?? 0;
+        const total = batch.totalUnits ?? 0;
+        const ownedByViewer = currentUserId != null && batch.triggeredByUserId != null && String(batch.triggeredByUserId) === currentUserId;
+        let label;
+        if (ownedByViewer) {
+            label = `Your bulk run — ${completed}/${total} complete`;
+        } else if (batch.triggeredByEmail) {
+            label = `Bulk run by ${batch.triggeredByEmail} — ${completed}/${total} complete`;
+        } else {
+            label = `Bulk run in progress — ${completed}/${total} complete`;
+        }
+        return {
+            kind: 'active-run',
+            label,
+            href: monitorAnchorId ? `#${monitorAnchorId}` : '#'
+        };
+    }
+    return {
+        kind: 'idle'
+    };
+}
+export const BulkTranslateTrigger = ({ basePath, monitorAnchorId = 'bulk-translate-monitor', currentUserId = null })=>{
+    const { data, loading, refetch } = useBulkTranslateActive(basePath);
+    const [modalOpen, setModalOpen] = useState(false);
+    // Plugin-wide bulk-translate kill switch (v1.2.8). Top-level for
+    // rules-of-hooks; rendering decision below.
+    const killSwitches = useGlobalKillSwitches();
+    const state = deriveTriggerState({
+        loading,
+        data,
+        monitorAnchorId,
+        currentUserId
+    });
+    if (state.kind === 'loading') {
+        return /*#__PURE__*/ _jsx("div", {
+            "aria-busy": "true",
+            "aria-label": "Loading bulk translate status",
+            "data-testid": "bulk-translate-trigger-skeleton",
+            role: "status",
+            style: SKELETON_STYLE
+        });
+    }
+    if (state.kind === 'active-run') {
+        return /*#__PURE__*/ _jsxs("a", {
+            "data-testid": "bulk-translate-trigger-active",
+            href: state.href,
+            style: CHIP_STYLE,
+            children: [
+                /*#__PURE__*/ _jsx("span", {
+                    "aria-hidden": "true",
+                    children: "●"
+                }),
+                state.label
+            ]
+        });
+    }
+    // Kill switch off — show paused affordance so admins can see the
+    // feature isn't broken, it's intentionally disabled. Active-run takes
+    // precedence above so an in-flight run is still visible even when
+    // new enqueues are blocked.
+    if (killSwitches && !killSwitches.bulkEnabled) {
+        return /*#__PURE__*/ _jsx("button", {
+            "aria-disabled": "true",
+            "data-testid": "bulk-translate-trigger-paused",
+            disabled: true,
+            style: {
+                ...BUTTON_STYLE,
+                opacity: 0.55,
+                cursor: 'not-allowed'
+            },
+            title: "Bulk Translate is paused site-wide. An admin can re-enable it in Translation Settings.",
+            type: "button",
+            children: "Bulk Translate (paused)"
+        });
+    }
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("button", {
+                "data-testid": "bulk-translate-trigger-idle",
+                onClick: ()=>setModalOpen(true),
+                style: BUTTON_STYLE,
+                type: "button",
+                children: "Bulk Translate"
+            }),
+            modalOpen && /*#__PURE__*/ _jsx(BulkTranslatePreflightModal, {
+                basePath: basePath,
+                onClose: ()=>{
+                    setModalOpen(false);
+                    // Refresh active-batch state so the trigger flips to
+                    // "active-run" immediately after a successful enqueue
+                    // (mirrors F-UX-15 expectation that the UI never shows a
+                    // stale "idle" trigger post-enqueue).
+                    refetch();
+                }
+            })
+        ]
+    });
+};

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

@@ -0,0 +1,33 @@
+/**
+ * Editor-facing "Your recent bulk runs" panel (1.2.8).
+ *
+ * Replaces the admin `UsageTable` on the Translation Hub Overview for
+ * editor-role viewers. Sourced from `bulk_translate_batches` via the
+ * `/api/translation-hub/bulk-translate` list endpoint (opened to
+ * editor+admin in 1.2.8) instead of `translation_usage` (the per-doc
+ * audit collection, which has no `triggeredByUserId` column and so
+ * can't support the attribution chip the editor experience needs).
+ *
+ * Layout: compact table of the editor's last ~5 bulk runs with an
+ * attribution chip on every row plus a CTA linking to the full
+ * BulkRunsHub for deeper history. Cost / token / model columns are
+ * absent — the field-level access mask on the batches collection
+ * strips those for non-admin viewers, and surfacing them to editors
+ * would reintroduce the cost-anxiety problem the UX critique flagged.
+ *
+ * Owned vs others' runs: per Decision #31-revised the table shows
+ * BOTH the current editor's runs and other editors' runs. The action
+ * column is only present on rows the editor owns. Rows owned by
+ * other editors render with an attribution chip and no action menu —
+ * editors coordinate by reading the chip, not by acting on each
+ * other's runs.
+ */
+import type React from 'react';
+interface Props {
+    basePath: string;
+    /** Stringified user id. Drives the attribution chip + action gating. */
+    currentUserId: string | null;
+    currentUserEmail: string | null;
+}
+export declare const EditorRecentRunsPanel: React.FC<Props>;
+export {};

package/dist/views/TranslationHub/EditorRecentRunsPanel.js

@@ -0,0 +1,290 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { readResponseError } from '../shared/fetch-error-body.js';
+// Active polling cadence matches the rest of the Hub — 5s while a
+// batch is in flight, 60s otherwise.
+const POLL_INTERVAL_MS = 5_000;
+const IDLE_POLL_INTERVAL_MS = 60_000;
+const ROW_LIMIT = 8;
+const SECTION_STYLE = {
+    background: 'var(--theme-elevation-50)',
+    border: '1px solid var(--theme-elevation-150)',
+    borderRadius: '6px',
+    padding: '1rem'
+};
+const HEADER_ROW_STYLE = {
+    display: 'grid',
+    gridTemplateColumns: '1.4fr 1fr 0.9fr 0.7fr 0.7fr',
+    gap: '0.75rem',
+    padding: '0.5rem 0',
+    fontSize: '0.75rem',
+    fontWeight: 600,
+    textTransform: 'uppercase',
+    letterSpacing: '0.05em',
+    color: 'var(--theme-elevation-500)'
+};
+const ROW_STYLE = {
+    display: 'grid',
+    gridTemplateColumns: '1.4fr 1fr 0.9fr 0.7fr 0.7fr',
+    gap: '0.75rem',
+    padding: '0.5rem 0',
+    alignItems: 'center',
+    fontSize: '0.875rem',
+    borderTop: '1px solid var(--theme-elevation-100)',
+    color: 'var(--theme-elevation-800)'
+};
+const STATUS_COLORS = {
+    queued: 'var(--theme-elevation-500)',
+    running: 'var(--theme-warning-500, #d97706)',
+    cancelling: 'var(--theme-warning-500, #d97706)',
+    success: 'var(--theme-success-500, #16a34a)',
+    partial: 'var(--theme-warning-500, #d97706)',
+    failed: 'var(--theme-error-500, #b91c1c)',
+    cancelled: 'var(--theme-elevation-500)',
+    reverted: 'var(--theme-elevation-500)'
+};
+function relTime(iso) {
+    if (!iso) return '—';
+    const diff = Date.now() - new Date(iso).getTime();
+    if (!Number.isFinite(diff)) return '—';
+    const s = Math.floor(diff / 1000);
+    if (s < 60) return `${s}s ago`;
+    if (s < 3600) return `${Math.floor(s / 60)}m ago`;
+    if (s < 86_400) return `${Math.floor(s / 3600)}h ago`;
+    return `${Math.floor(s / 86_400)}d ago`;
+}
+// Active = anything that isn't terminal. Drives the poll cadence
+// (5s while live, 60s while idle).
+const TERMINAL_STATUSES = new Set([
+    'success',
+    'partial',
+    'failed',
+    'cancelled',
+    'reverted'
+]);
+export const EditorRecentRunsPanel = ({ basePath, currentUserId, currentUserEmail })=>{
+    void currentUserEmail; // reserved for future "by you" chip styling
+    const [rows, setRows] = useState(null);
+    const [error, setError] = useState(null);
+    useEffect(()=>{
+        let cancelled = false;
+        let timer;
+        let hasActiveBatch = false;
+        async function fetchRows() {
+            const url = `${basePath}/api/translation-hub/bulk-translate?limit=${ROW_LIMIT}&sort=-enqueuedAt`;
+            const res = await fetch(url, {
+                credentials: 'include'
+            });
+            if (!res.ok) {
+                throw new Error(await readResponseError(res));
+            }
+            const json = await res.json();
+            return json.batches ?? [];
+        }
+        async function poll() {
+            try {
+                const next = await fetchRows();
+                if (cancelled) return;
+                setRows(next);
+                setError(null);
+                hasActiveBatch = next.some((r)=>!TERMINAL_STATUSES.has(r.status));
+            } catch (e) {
+                if (cancelled) return;
+                setError(e instanceof Error ? e.message : String(e));
+            } finally{
+                if (!cancelled && document.visibilityState === 'visible') {
+                    const nextDelay = hasActiveBatch ? POLL_INTERVAL_MS : IDLE_POLL_INTERVAL_MS;
+                    timer = setTimeout(poll, nextDelay);
+                }
+            }
+        }
+        function onVisibility() {
+            if (document.visibilityState === 'visible' && !cancelled) {
+                if (timer) clearTimeout(timer);
+                poll();
+            }
+        }
+        document.addEventListener('visibilitychange', onVisibility);
+        poll();
+        return ()=>{
+            cancelled = true;
+            if (timer) clearTimeout(timer);
+            document.removeEventListener('visibilitychange', onVisibility);
+        };
+    }, [
+        basePath
+    ]);
+    const visibleRows = useMemo(()=>rows ?? [], [
+        rows
+    ]);
+    return /*#__PURE__*/ _jsxs("section", {
+        style: SECTION_STYLE,
+        children: [
+            /*#__PURE__*/ _jsxs("header", {
+                style: {
+                    display: 'flex',
+                    alignItems: 'baseline',
+                    justifyContent: 'space-between',
+                    marginBottom: '0.75rem'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("h2", {
+                        style: {
+                            margin: 0,
+                            fontSize: '1rem',
+                            color: 'var(--theme-elevation-1000)'
+                        },
+                        children: "Recent bulk runs"
+                    }),
+                    /*#__PURE__*/ _jsx("a", {
+                        href: `${basePath}/admin/translation-runs`,
+                        style: {
+                            fontSize: '0.75rem',
+                            color: 'var(--theme-elevation-500)',
+                            textDecoration: 'none'
+                        },
+                        children: "View all →"
+                    })
+                ]
+            }),
+            error && /*#__PURE__*/ _jsx("p", {
+                style: {
+                    color: 'var(--theme-error-500, #b91c1c)',
+                    fontSize: '0.875rem',
+                    margin: '0 0 0.5rem'
+                },
+                children: error
+            }),
+            rows === null && /*#__PURE__*/ _jsx("p", {
+                style: {
+                    margin: 0,
+                    color: 'var(--theme-elevation-500)',
+                    fontSize: '0.875rem'
+                },
+                children: "Loading…"
+            }),
+            rows !== null && visibleRows.length === 0 && /*#__PURE__*/ _jsx("p", {
+                style: {
+                    margin: 0,
+                    color: 'var(--theme-elevation-500)',
+                    fontSize: '0.875rem'
+                },
+                children: "No bulk translation runs yet. Use the Bulk Translate button above to start one."
+            }),
+            visibleRows.length > 0 && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: HEADER_ROW_STYLE,
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                children: "Run"
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                children: "Triggered by"
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                children: "Status"
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                children: "Progress"
+                            }),
+                            /*#__PURE__*/ _jsx("span", {
+                                style: {
+                                    textAlign: 'right'
+                                },
+                                children: "When"
+                            })
+                        ]
+                    }),
+                    visibleRows.map((r)=>{
+                        const total = r.totalUnits ?? 0;
+                        const done = r.completedUnits ?? 0;
+                        const failed = r.failedUnits ?? 0;
+                        const skipped = r.skippedUnits ?? 0;
+                        const owned = currentUserId != null && r.triggeredByUserId != null && String(r.triggeredByUserId) === currentUserId;
+                        const triggeredBy = r.triggeredByEmail ?? (r.triggeredByUserId != null ? `user #${r.triggeredByUserId}` : '—');
+                        return /*#__PURE__*/ _jsxs("div", {
+                            style: ROW_STYLE,
+                            children: [
+                                /*#__PURE__*/ _jsxs("span", {
+                                    style: {
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis'
+                                    },
+                                    title: `Batch ${r.id} · mode ${r.mode}`,
+                                    children: [
+                                        /*#__PURE__*/ _jsxs("code", {
+                                            style: {
+                                                fontSize: '0.75rem'
+                                            },
+                                            children: [
+                                                "#",
+                                                String(r.id)
+                                            ]
+                                        }),
+                                        ' ',
+                                        /*#__PURE__*/ _jsx("span", {
+                                            style: {
+                                                color: 'var(--theme-elevation-500)'
+                                            },
+                                            children: r.mode
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("span", {
+                                    style: {
+                                        display: 'inline-flex',
+                                        alignItems: 'center',
+                                        gap: '0.4rem',
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis'
+                                    },
+                                    children: [
+                                        triggeredBy,
+                                        owned && /*#__PURE__*/ _jsx("span", {
+                                            style: {
+                                                fontSize: '0.65rem',
+                                                padding: '0.05rem 0.4rem',
+                                                borderRadius: '999px',
+                                                background: 'var(--theme-success-100, #dcfce7)',
+                                                color: 'var(--theme-success-800, #166534)',
+                                                fontWeight: 500
+                                            },
+                                            children: "you"
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("span", {
+                                    style: {
+                                        color: STATUS_COLORS[r.status] ?? 'var(--theme-elevation-800)',
+                                        fontWeight: 500
+                                    },
+                                    children: [
+                                        r.status,
+                                        failed > 0 ? ` (${failed} failed)` : '',
+                                        skipped > 0 ? ` (${skipped} skipped)` : ''
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("span", {
+                                    children: [
+                                        done,
+                                        "/",
+                                        total
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx("span", {
+                                    style: {
+                                        textAlign: 'right',
+                                        color: 'var(--theme-elevation-500)'
+                                    },
+                                    children: relTime(r.completedAt ?? r.startedAt ?? r.enqueuedAt)
+                                })
+                            ]
+                        }, String(r.id));
+                    })
+                ]
+            })
+        ]
+    });
+};

package/dist/views/TranslationHub/Hub.client.d.ts

@@ -0,0 +1,74 @@
+import type React from 'react';
+export interface TranslationSettings {
+    activeProvider?: string | null;
+    enabledTargetLocales?: string[] | null;
+    globalAutoTranslateEnabled?: boolean | null;
+    globalManualTranslateEnabled?: boolean | null;
+    globalBulkTranslateEnabled?: boolean | null;
+    perCollection?: Array<{
+        slug: string;
+        enabled?: boolean | null;
+        autoOnPublish?: boolean | null;
+        targetLocalesOverride?: string[] | null;
+        excludedFieldPaths?: string[] | null;
+        translateSlug?: boolean | null;
+    }> | null;
+}
+export interface OpenRouterSettings {
+    model?: string | null;
+}
+/**
+ * Locale list passed from the server (`req.payload.config.localization`).
+ * Source of truth for locale toggles in the Hub — replaces the prior
+ * hardcoded `['es', 'fr']` in SettingsRail that would silently drift the
+ * moment a consumer added or removed a locale in payload.config.
+ */
+export interface LocaleConfig {
+    defaultLocale: string;
+    locales: Array<{
+        code: string;
+        label: string;
+    }>;
+}
+export interface JobRow {
+    collection: string;
+    completed_locales?: string[] | null;
+    created_at: string;
+    document_id: string;
+    failed_locales?: Array<{
+        locale: string;
+        error?: string;
+    }> | null;
+    id: number;
+    job_id?: string;
+    started_at?: string | null;
+    status: 'running' | 'completed' | 'failed';
+    total_locales: number;
+}
+interface TranslationHubClientProps {
+    locales: LocaleConfig;
+    /**
+     * 1.2.8: viewer role. Drives which tabs render, which KPI cards
+     * appear, and whether the Recent translations table scopes by
+     * ownership. `admin` keeps the pre-1.2.8 surface; `editor` hides
+     * Configuration / Audit / Advanced tabs and reframes Overview around
+     * "your runs" (still shows other editors' runs as read-only with
+     * attribution per Decision #31-revised).
+     */
+    role: 'admin' | 'editor';
+    /**
+     * 1.2.8: current user id (stringified, matches the persisted
+     * `triggeredByUserId` column shape). Used by the UsageTable to
+     * decide which rows are owned by the current viewer so the action
+     * menu is shown for own rows and hidden for others.
+     */
+    currentUserId: string | null;
+    /**
+     * 1.2.8: current user email. Mirrored into modal copy ("…this
+     * conflict, you tried to start a new run while…") so the editor
+     * sees their own email in the chrome.
+     */
+    currentUserEmail: string | null;
+}
+export declare const TranslationHubClient: React.FC<TranslationHubClientProps>;
+export {};