@purposeinplay/payload-ai-translate 0.1.0

package/dist/views/TranslationHub/Hub.client.js

@@ -0,0 +1,357 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ActiveJobs } from './ActiveJobs.js';
+import { AdvancedPanel } from './AdvancedPanel.js';
+import { AlertBanner } from './AlertBanner.js';
+import { AuditPanel } from './AuditPanel.js';
+import { isActiveStatus, isTerminalStatus } from './BulkTranslate.types.js';
+import { BulkTranslateMonitor } from './BulkTranslateMonitor.js';
+import { BulkTranslateNarrowViewportBanner } from './BulkTranslateNarrowViewportBanner.js';
+import { BulkTranslateTerminalCard } from './BulkTranslateTerminalCard.js';
+import { BulkTranslateTrigger } from './BulkTranslateTrigger.js';
+import { EditorRecentRunsPanel } from './EditorRecentRunsPanel.js';
+import { PerCollectionConfig } from './PerCollectionConfig.js';
+import { SettingsRail } from './SettingsRail.js';
+import { StatusStrip } from './StatusStrip.js';
+import { panelIdFor, resolveTabKey, tabIdFor } from './tabNavigation.js';
+import { useTerminalBannerVisibility } from './terminalBannerVisibility.js';
+import { UsageTable } from './UsageTable.js';
+import { useBulkTranslateActive } from './useBulkTranslateActive.js';
+// Derives the Next.js basePath from the current admin URL (everything
+// before `/admin/`). Hardcoding via env vars would couple the component
+// to one consumer's config — blog-wild uses `/blog`, wild-payload-cms
+// uses ''. Detect at runtime.
+function getBasePath() {
+    if (typeof window === 'undefined') {
+        return '';
+    }
+    const idx = window.location.pathname.indexOf('/admin/');
+    return idx > 0 ? window.location.pathname.slice(0, idx) : '';
+}
+const TAB_LABELS = {
+    overview: 'Overview',
+    configuration: 'Configuration',
+    audit: 'Audit & Cost',
+    advanced: 'Advanced'
+};
+const TAB_DESCRIPTIONS = {
+    overview: 'Live status, alerts, in-flight jobs, and recent translation activity.',
+    configuration: 'Provider, model, target locales, and per-collection overrides.',
+    audit: 'Full translation history with date range and per-collection breakdowns.',
+    advanced: 'Developer tools: meta-table inspection, raw event log access.'
+};
+const ADMIN_TAB_ORDER = [
+    'overview',
+    'configuration',
+    'audit',
+    'advanced'
+];
+// 1.2.8: editors only see Overview. Configuration (provider keys,
+// cost limits), Audit & Cost (global $ / token telemetry), and
+// Advanced (operational tools like force-reset) stay admin-only.
+const EDITOR_TAB_ORDER = [
+    'overview'
+];
+function getTabOrder(role) {
+    return role === 'admin' ? ADMIN_TAB_ORDER : EDITOR_TAB_ORDER;
+}
+export const TranslationHubClient = ({ locales, role, currentUserId, currentUserEmail })=>{
+    const basePath = useMemo(getBasePath, []);
+    const [activeTab, setActiveTab] = useState('overview');
+    // 1.2.8: per-role tab visibility. Editors see Overview only;
+    // admins see the full strip. Kept memoized so the array identity
+    // is stable across renders (keyboard handler depends on it).
+    const tabOrder = useMemo(()=>getTabOrder(role), [
+        role
+    ]);
+    // NEW-4 (v1.2.6): refs onto each `<button role="tab">` so the
+    // keyboard handler can move DOM focus to the next tab without
+    // waiting for React to re-render. Following the WAI-ARIA Authoring
+    // Practices roving-tabindex pattern: only the active tab is
+    // `tabIndex=0`; the rest are `-1`, so Tab from outside the strip
+    // lands on the active tab, and the next Tab moves to the panel.
+    const tabRefs = useRef({
+        overview: null,
+        configuration: null,
+        audit: null,
+        advanced: null
+    });
+    const handleTabKeyDown = useCallback((e)=>{
+        const currentIndex = tabOrder.indexOf(activeTab);
+        const action = resolveTabKey(e.key, currentIndex, tabOrder.length);
+        if (action?.kind !== 'move') {
+            return;
+        }
+        e.preventDefault();
+        const nextTab = tabOrder[action.nextIndex];
+        if (!nextTab) {
+            return;
+        }
+        setActiveTab(nextTab);
+        // Focus the now-active tab so screen-reader users hear the
+        // selection move. `useEffect`-after-state would also work but
+        // the imperative ref keeps the keystroke → focus pair atomic.
+        tabRefs.current[nextTab]?.focus();
+    }, [
+        activeTab
+    ]);
+    const [translationSettings, setTranslationSettings] = useState(null);
+    const [openRouterSettings, setOpenRouterSettings] = useState(null);
+    const [loadError, setLoadError] = useState(null);
+    // Single source of truth for bulk-translate state, shared across the
+    // monitor + terminal card. The trigger runs its own hook because it
+    // ships independently of these surfaces (e.g. cancellation puts the
+    // trigger back into "loading" while the terminal card still wants
+    // the last known terminal-state snapshot).
+    const bulkActive = useBulkTranslateActive(basePath);
+    const activeBatch = bulkActive.data?.batch ?? null;
+    // HUB-3 (v1.2.6): terminal-card visibility is now a derived,
+    // per-batch-id concern. The hook combines a freshness check
+    // (≤ 1h past completedAt) with a localStorage-persisted dismissed
+    // set keyed by batch id. Previously the in-memory `terminalDismissed`
+    // flag reset on every reload, leaving the destructive "Revert this
+    // batch" affordance pinned to the Hub for the full 24h revert window.
+    const terminalBanner = useTerminalBannerVisibility(activeBatch?.id ?? null, activeBatch?.completedAt ?? null);
+    const showBulkMonitor = activeBatch !== null && isActiveStatus(activeBatch.status);
+    const showBulkTerminal = activeBatch !== null && isTerminalStatus(activeBatch.status) && terminalBanner.shouldShow;
+    // Initial load of both globals.
+    useEffect(()=>{
+        let cancelled = false;
+        Promise.all([
+            fetch(`${basePath}/api/globals/translation-settings?depth=0`, {
+                credentials: 'include'
+            }).then((r)=>r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))),
+            fetch(`${basePath}/api/globals/openrouter-settings?depth=0`, {
+                credentials: 'include'
+            }).then((r)=>r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`)))
+        ]).then(([ts, ors])=>{
+            if (cancelled) {
+                return;
+            }
+            setTranslationSettings(ts);
+            setOpenRouterSettings(ors);
+        }).catch((e)=>{
+            if (cancelled) {
+                return;
+            }
+            setLoadError(e instanceof Error ? e.message : String(e));
+        });
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        basePath
+    ]);
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            padding: '1.5rem 2rem',
+            maxWidth: '1400px',
+            margin: '0 auto'
+        },
+        children: [
+            /*#__PURE__*/ _jsxs("header", {
+                style: {
+                    marginBottom: '1rem'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            display: 'flex',
+                            alignItems: 'baseline',
+                            justifyContent: 'space-between',
+                            marginBottom: '0.75rem'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("h1", {
+                                style: {
+                                    fontSize: '1.5rem',
+                                    margin: 0,
+                                    color: 'var(--theme-elevation-1000)'
+                                },
+                                children: "Translation"
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '1rem'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("p", {
+                                        style: {
+                                            margin: 0,
+                                            color: 'var(--theme-elevation-500)',
+                                            fontSize: '0.875rem'
+                                        },
+                                        children: TAB_DESCRIPTIONS[activeTab]
+                                    }),
+                                    activeTab === 'overview' && /*#__PURE__*/ _jsx(BulkTranslateTrigger, {
+                                        basePath: basePath,
+                                        currentUserId: currentUserId
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        "aria-label": "Translation Hub sections",
+                        role: "tablist",
+                        style: {
+                            display: 'flex',
+                            gap: '0.25rem',
+                            borderBottom: '1px solid var(--theme-elevation-150)'
+                        },
+                        children: tabOrder.map((t)=>{
+                            const isActive = activeTab === t;
+                            return /*#__PURE__*/ _jsx("button", {
+                                "aria-controls": panelIdFor(t),
+                                "aria-current": isActive ? 'page' : undefined,
+                                "aria-selected": isActive,
+                                id: tabIdFor(t),
+                                onClick: ()=>setActiveTab(t),
+                                onKeyDown: handleTabKeyDown,
+                                ref: (el)=>{
+                                    tabRefs.current[t] = el;
+                                },
+                                role: "tab",
+                                style: {
+                                    padding: '0.5rem 0.85rem',
+                                    background: 'transparent',
+                                    border: 'none',
+                                    borderBottom: isActive ? '2px solid var(--theme-success-500, #16a34a)' : '2px solid transparent',
+                                    color: isActive ? 'var(--theme-elevation-1000)' : 'var(--theme-elevation-500)',
+                                    fontWeight: isActive ? 600 : 500,
+                                    fontSize: '0.875rem',
+                                    cursor: 'pointer',
+                                    marginBottom: '-1px'
+                                },
+                                tabIndex: isActive ? 0 : -1,
+                                type: "button",
+                                children: TAB_LABELS[t]
+                            }, t);
+                        })
+                    })
+                ]
+            }),
+            loadError && /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    padding: '0.75rem 1rem',
+                    background: 'var(--theme-error-100, #fee2e2)',
+                    border: '1px solid var(--theme-error-500, #b91c1c)',
+                    borderRadius: '4px',
+                    marginBottom: '1rem',
+                    color: 'var(--theme-error-500, #b91c1c)',
+                    fontSize: '0.875rem'
+                },
+                children: [
+                    "Failed to load translation data: ",
+                    loadError
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("main", {
+                style: {
+                    marginTop: '1rem',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '1.5rem'
+                },
+                children: [
+                    activeTab === 'overview' && /*#__PURE__*/ _jsxs("div", {
+                        "aria-labelledby": tabIdFor('overview'),
+                        id: panelIdFor('overview'),
+                        role: "tabpanel",
+                        style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: '1.5rem'
+                        },
+                        tabIndex: 0,
+                        children: [
+                            /*#__PURE__*/ _jsx(BulkTranslateNarrowViewportBanner, {}),
+                            /*#__PURE__*/ _jsx(AlertBanner, {
+                                basePath: basePath
+                            }),
+                            role === 'admin' && /*#__PURE__*/ _jsx(StatusStrip, {
+                                basePath: basePath
+                            }),
+                            showBulkMonitor && activeBatch ? /*#__PURE__*/ _jsx(BulkTranslateMonitor, {
+                                basePath: basePath,
+                                batch: activeBatch,
+                                isOffline: bulkActive.isOffline,
+                                onRetry: bulkActive.refetch
+                            }) : null,
+                            showBulkTerminal && activeBatch ? /*#__PURE__*/ _jsx(BulkTranslateTerminalCard, {
+                                basePath: basePath,
+                                batch: activeBatch,
+                                onAfterRevert: bulkActive.refetch,
+                                onDismiss: terminalBanner.dismiss
+                            }) : null,
+                            showBulkMonitor ? null : /*#__PURE__*/ _jsx(ActiveJobs, {
+                                basePath: basePath
+                            }),
+                            role === 'admin' ? /*#__PURE__*/ _jsx(UsageTable, {
+                                basePath: basePath
+                            }) : /*#__PURE__*/ _jsx(EditorRecentRunsPanel, {
+                                basePath: basePath,
+                                currentUserId: currentUserId,
+                                currentUserEmail: currentUserEmail
+                            })
+                        ]
+                    }),
+                    role === 'admin' && activeTab === 'configuration' && /*#__PURE__*/ _jsxs("div", {
+                        "aria-labelledby": tabIdFor('configuration'),
+                        id: panelIdFor('configuration'),
+                        role: "tabpanel",
+                        style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: '1rem'
+                        },
+                        tabIndex: 0,
+                        children: [
+                            /*#__PURE__*/ _jsx(SettingsRail, {
+                                basePath: basePath,
+                                locales: locales,
+                                onSettingsChange: (ts, ors)=>{
+                                    if (ts) {
+                                        setTranslationSettings(ts);
+                                    }
+                                    if (ors) {
+                                        setOpenRouterSettings(ors);
+                                    }
+                                },
+                                openRouterSettings: openRouterSettings,
+                                translationSettings: translationSettings
+                            }),
+                            /*#__PURE__*/ _jsx(PerCollectionConfig, {
+                                basePath: basePath,
+                                locales: locales,
+                                onSettingsChange: (ts)=>setTranslationSettings(ts),
+                                translationSettings: translationSettings
+                            })
+                        ]
+                    }),
+                    role === 'admin' && activeTab === 'audit' && /*#__PURE__*/ _jsx("div", {
+                        "aria-labelledby": tabIdFor('audit'),
+                        id: panelIdFor('audit'),
+                        role: "tabpanel",
+                        tabIndex: 0,
+                        children: /*#__PURE__*/ _jsx(AuditPanel, {
+                            basePath: basePath
+                        })
+                    }),
+                    role === 'admin' && activeTab === 'advanced' && /*#__PURE__*/ _jsx("div", {
+                        "aria-labelledby": tabIdFor('advanced'),
+                        id: panelIdFor('advanced'),
+                        role: "tabpanel",
+                        tabIndex: 0,
+                        children: /*#__PURE__*/ _jsx(AdvancedPanel, {
+                            basePath: basePath
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+interface Props {
+    basePath: string;
+    disabled?: boolean;
+    onChange: (modelId: string) => void;
+    value: string;
+}
+/**
+ * Compact combobox for the Translation Hub's settings rail. Same data
+ * source as the standalone OpenRouter Settings page (`/api/openrouter/models`)
+ * but slimmer styling — fits the 320px rail.
+ */
+export declare const ModelCombobox: React.FC<Props>;
+export {};