@purposeinplay/payload-ai-translate 0.1.0

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

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

package/dist/views/TranslationHub/AlertBanner.js

@@ -0,0 +1,568 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { editorCodeFromAlertType, editorMessageFor } from '../../lib/error-messages.js';
+import { docHref } from '../shared/docHref.js';
+import { groupAlerts, splitVisibleGroups } from './alertGrouping.js';
+const ALERT_LOOKBACK_MS = 24 * 60 * 60 * 1000; // 24h
+// Active poll cadence — used while ≥1 undismissed alert is showing.
+// 30s keeps the visible banner stack reasonably fresh as new alerts
+// fire mid-translation without thrashing the endpoint.
+const POLL_INTERVAL_MS = 30_000;
+// Idle cadence — used when the latest poll returned zero alerts.
+// Pre-1.2.8 the loop re-queued at POLL_INTERVAL_MS unconditionally
+// (no visibility check, no idle back-off), so any admin tab on
+// `/admin/translation` hit `/api/translation-alerts?where[...]=...`
+// every 30s for the lifetime of the page — even after every alert
+// was dismissed. Matches the same defect class fixed in
+// `ActiveJobs.tsx` and `useBulkTranslateActive.ts`.
+const IDLE_POLL_INTERVAL_MS = 120_000;
+/** v1.2.6 HUB-1: bumped from 10 to 30 so the grouping has the data it
+ *  needs to summarise larger bursts. The visible stack is capped at 3
+ *  groups via `splitVisibleGroups`. */ const ALERT_PAGE_LIMIT = 30;
+const MAX_VISIBLE_GROUPS = 3;
+const ALERT_COLORS = {
+    'cost-guard-abort': {
+        bg: 'var(--theme-warning-100, #fef3c7)',
+        border: 'var(--theme-warning-500, #d97706)',
+        fg: 'var(--theme-warning-500, #d97706)'
+    },
+    'persistent-failure': {
+        bg: 'var(--theme-error-100, #fee2e2)',
+        border: 'var(--theme-error-500, #b91c1c)',
+        fg: 'var(--theme-error-500, #b91c1c)'
+    },
+    'provider-outage': {
+        bg: 'var(--theme-error-100, #fee2e2)',
+        border: 'var(--theme-error-500, #b91c1c)',
+        fg: 'var(--theme-error-500, #b91c1c)'
+    }
+};
+/**
+ * Pull the editor-facing code + context off the persisted alert row.
+ * The catalogue's `editorMessageFor(code, context)` renders the
+ * friendly title + body. Falls back to the `alertType` mapping when
+ * `metadata.code` is absent (pre-1.2.5 rows).
+ */ function readAlertMessage(alert) {
+    const meta = alert.metadata ?? {};
+    const code = typeof meta['code'] === 'string' ? meta['code'] : editorCodeFromAlertType(alert.alertType);
+    const context = typeof meta['context'] === 'object' && meta['context'] !== null ? meta['context'] : {};
+    return editorMessageFor(code, context);
+}
+function relTime(iso) {
+    const diff = Date.now() - new Date(iso).getTime();
+    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`;
+}
+export const AlertBanner = ({ basePath })=>{
+    const [alerts, setAlerts] = useState([]);
+    const [dismissingIds, setDismissingIds] = useState(new Set());
+    const [showAllGroups, setShowAllGroups] = useState(false);
+    useEffect(()=>{
+        let cancelled = false;
+        let timer = null;
+        // Tracks whether the last successful poll returned any alerts.
+        // Drives the next-tick cadence (active 30s vs idle 120s).
+        let hasActiveAlerts = false;
+        async function poll() {
+            try {
+                const since = new Date(Date.now() - ALERT_LOOKBACK_MS).toISOString();
+                const url = `${basePath}/api/translation-alerts` + '?where[dismissed][equals]=false' + `&where[createdAt][greater_than]=${encodeURIComponent(since)}` + `&sort=-createdAt&limit=${ALERT_PAGE_LIMIT}&depth=0`;
+                const r = await fetch(url, {
+                    credentials: 'include'
+                });
+                if (!r.ok) {
+                    return;
+                }
+                const d = await r.json();
+                if (!cancelled) {
+                    const docs = d.docs ?? [];
+                    setAlerts(docs);
+                    hasActiveAlerts = docs.length > 0;
+                }
+            } catch  {
+            // Best-effort polling — swallow network failures.
+            } finally{
+                // Visibility-aware + cadence-aware polling (matches the
+                // pattern used by `ActiveJobs` and `useBulkTranslateActive`):
+                // skip polls while the tab is hidden (the visibilitychange
+                // listener below re-fires when the tab returns), and back off
+                // to a 2-minute idle cadence when no alerts are showing.
+                if (!cancelled && document.visibilityState === 'visible') {
+                    const nextDelay = hasActiveAlerts ? 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
+    ]);
+    async function dismiss(id) {
+        setDismissingIds((prev)=>new Set(prev).add(id));
+        // Optimistic local removal — the next poll will re-confirm.
+        setAlerts((prev)=>prev.filter((a)=>a.id !== id));
+        try {
+            await fetch(`${basePath}/api/translation-alerts/${id}`, {
+                method: 'PATCH',
+                credentials: 'include',
+                headers: {
+                    'content-type': 'application/json'
+                },
+                body: JSON.stringify({
+                    dismissed: true
+                })
+            });
+        } catch  {
+        // If the PATCH fails the next poll will surface the alert again.
+        } finally{
+            setDismissingIds((prev)=>{
+                const next = new Set(prev);
+                next.delete(id);
+                return next;
+            });
+        }
+    }
+    /**
+   * HUB-1: bulk-dismiss every currently-visible alert in one go.
+   * Optimistically clears local state; PATCH calls fan out in parallel.
+   * No bulk endpoint exists yet — per-id PATCH is the cheapest path
+   * without adding a new endpoint to the plugin surface. We bound by
+   * the page limit (30) so a runaway burst doesn't fan out unbounded.
+   */ async function dismissAll(ids) {
+        if (ids.length === 0) {
+            return;
+        }
+        const idSet = new Set(ids);
+        setDismissingIds((prev)=>{
+            const next = new Set(prev);
+            for (const id of ids){
+                next.add(id);
+            }
+            return next;
+        });
+        setAlerts((prev)=>prev.filter((a)=>!idSet.has(a.id)));
+        await Promise.allSettled(ids.map((id)=>fetch(`${basePath}/api/translation-alerts/${id}`, {
+                method: 'PATCH',
+                credentials: 'include',
+                headers: {
+                    'content-type': 'application/json'
+                },
+                body: JSON.stringify({
+                    dismissed: true
+                })
+            })));
+        setDismissingIds((prev)=>{
+            const next = new Set(prev);
+            for (const id of ids){
+                next.delete(id);
+            }
+            return next;
+        });
+    }
+    // Memo the grouping so re-renders driven by `dismissingIds` don't
+    // re-shuffle group order. `groupAlerts` is pure so referential
+    // stability on `alerts` is enough.
+    const groups = useMemo(()=>groupAlerts(alerts), [
+        alerts
+    ]);
+    const split = useMemo(()=>splitVisibleGroups(groups, showAllGroups ? groups.length : MAX_VISIBLE_GROUPS), [
+        groups,
+        showAllGroups
+    ]);
+    if (alerts.length === 0) {
+        return null;
+    }
+    const allIds = alerts.map((a)=>a.id);
+    const bulkBusy = allIds.every((id)=>dismissingIds.has(id));
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.5rem'
+        },
+        children: [
+            alerts.length > 1 && /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: '0.75rem',
+                    padding: '0.4rem 0.75rem',
+                    background: 'var(--theme-elevation-50)',
+                    border: '1px solid var(--theme-elevation-150)',
+                    borderRadius: '4px',
+                    fontSize: '0.75rem',
+                    color: 'var(--theme-elevation-700)'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("span", {
+                        children: [
+                            /*#__PURE__*/ _jsx("strong", {
+                                style: {
+                                    color: 'var(--theme-elevation-900)'
+                                },
+                                children: alerts.length
+                            }),
+                            " alert",
+                            alerts.length === 1 ? '' : 's',
+                            " across",
+                            ' ',
+                            /*#__PURE__*/ _jsx("strong", {
+                                style: {
+                                    color: 'var(--theme-elevation-900)'
+                                },
+                                children: groups.length
+                            }),
+                            " group",
+                            groups.length === 1 ? '' : 's',
+                            split.hiddenGroupCount > 0 && !showAllGroups ? ` · ${split.hiddenAlertCount} hidden` : ''
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        "data-testid": "translation-alerts-dismiss-all",
+                        disabled: bulkBusy,
+                        onClick: ()=>dismissAll(allIds),
+                        style: {
+                            padding: '0.25rem 0.6rem',
+                            background: 'transparent',
+                            color: 'var(--theme-elevation-900)',
+                            border: '1px solid var(--theme-elevation-300)',
+                            borderRadius: '4px',
+                            fontSize: '0.75rem',
+                            fontWeight: 600,
+                            cursor: bulkBusy ? 'wait' : 'pointer'
+                        },
+                        title: "Dismiss every alert currently visible",
+                        type: "button",
+                        children: "Dismiss all"
+                    })
+                ]
+            }),
+            split.visible.map((group)=>/*#__PURE__*/ _jsx(AlertGroupBanner, {
+                    basePath: basePath,
+                    dismissingIds: dismissingIds,
+                    group: group,
+                    onDismiss: dismiss,
+                    onDismissGroup: (ids)=>void dismissAll(ids)
+                }, group.key)),
+            split.hiddenGroupCount > 0 && /*#__PURE__*/ _jsx("button", {
+                "data-testid": "translation-alerts-show-more",
+                onClick: ()=>setShowAllGroups((prev)=>!prev),
+                style: {
+                    alignSelf: 'flex-start',
+                    padding: '0.3rem 0.6rem',
+                    background: 'transparent',
+                    border: '1px dashed var(--theme-elevation-300)',
+                    borderRadius: '4px',
+                    color: 'var(--theme-elevation-700)',
+                    fontSize: '0.75rem',
+                    cursor: 'pointer'
+                },
+                type: "button",
+                children: showAllGroups ? 'Collapse to top groups' : `+ ${split.hiddenGroupCount} more group${split.hiddenGroupCount === 1 ? '' : 's'} (${split.hiddenAlertCount} alert${split.hiddenAlertCount === 1 ? '' : 's'})`
+            })
+        ]
+    });
+};
+/**
+ * Render one group as a single banner. The newest alert in the group
+ * provides the title / body / link; the group's `alerts.length`
+ * surfaces as a `× N` count badge. Expanding the group reveals the
+ * per-alert dismiss controls so an editor can deal with specific docs
+ * inside a group.
+ */ const AlertGroupBanner = ({ basePath, group, dismissingIds, onDismiss, onDismissGroup })=>{
+    const [expanded, setExpanded] = useState(false);
+    // Sorting newest-first inside the group so the headline alert is the
+    // most recent — matches the "top of stack = newest" convention.
+    const sorted = useMemo(()=>[
+            ...group.alerts
+        ].sort((a, b)=>a.createdAt < b.createdAt ? 1 : -1), [
+        group.alerts
+    ]);
+    const headline = sorted[0];
+    const colors = ALERT_COLORS[group.alertType];
+    const friendly = readAlertMessage(headline);
+    const isMultiple = sorted.length > 1;
+    const groupIds = sorted.map((a)=>a.id);
+    const allBusy = groupIds.every((id)=>dismissingIds.has(id));
+    const docLink = headline.collection && headline.documentId ? docHref(basePath, headline.collection, headline.documentId, group.locale) : null;
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.5rem',
+            padding: '0.75rem 1rem',
+            background: colors.bg,
+            border: `1px solid ${colors.border}`,
+            borderRadius: '6px'
+        },
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    gap: '0.75rem',
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            flex: 1,
+                            minWidth: 0
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    fontSize: '0.875rem',
+                                    fontWeight: 600,
+                                    color: colors.fg,
+                                    marginBottom: '0.15rem',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '0.4rem',
+                                    flexWrap: 'wrap'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx("span", {
+                                        children: friendly.title
+                                    }),
+                                    isMultiple && /*#__PURE__*/ _jsxs("span", {
+                                        style: {
+                                            padding: '0.05rem 0.4rem',
+                                            background: colors.border,
+                                            color: 'var(--theme-elevation-0)',
+                                            borderRadius: '999px',
+                                            fontSize: '0.7rem',
+                                            fontWeight: 600
+                                        },
+                                        title: `${sorted.length} alerts in the last ${group.bucket}`,
+                                        children: [
+                                            "× ",
+                                            sorted.length
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("span", {
+                                        style: {
+                                            marginLeft: '0.25rem',
+                                            fontWeight: 400,
+                                            fontSize: '0.75rem',
+                                            color: 'var(--theme-elevation-700)'
+                                        },
+                                        children: [
+                                            "· ",
+                                            relTime(headline.createdAt),
+                                            isMultiple ? ` · ${group.bucket}` : ''
+                                        ]
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    fontSize: '0.8rem',
+                                    color: 'var(--theme-elevation-900)',
+                                    lineHeight: 1.45
+                                },
+                                title: headline.message,
+                                children: [
+                                    friendly.body,
+                                    headline.collection && /*#__PURE__*/ _jsxs(_Fragment, {
+                                        children: [
+                                            ' — ',
+                                            docLink && !isMultiple ? /*#__PURE__*/ _jsx("a", {
+                                                href: docLink,
+                                                rel: "noopener noreferrer",
+                                                style: {
+                                                    color: 'var(--theme-success-500)',
+                                                    textDecoration: 'none'
+                                                },
+                                                target: "_blank",
+                                                children: /*#__PURE__*/ _jsxs("code", {
+                                                    children: [
+                                                        headline.collection,
+                                                        headline.documentId ? ` #${headline.documentId}` : ''
+                                                    ]
+                                                })
+                                            }) : /*#__PURE__*/ _jsxs("code", {
+                                                style: {
+                                                    color: 'var(--theme-elevation-700)'
+                                                },
+                                                children: [
+                                                    headline.collection,
+                                                    isMultiple ? ` · ${sorted.length} docs` : ''
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            }),
+                            friendly.action && /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    fontSize: '0.75rem',
+                                    color: 'var(--theme-elevation-700)',
+                                    fontStyle: 'italic',
+                                    marginTop: '0.25rem'
+                                },
+                                children: friendly.action
+                            })
+                        ]
+                    }),
+                    !isMultiple && docLink && /*#__PURE__*/ _jsx("a", {
+                        href: docLink,
+                        rel: "noopener noreferrer",
+                        style: {
+                            padding: '0.25rem 0.6rem',
+                            background: 'transparent',
+                            color: colors.fg,
+                            border: `1px solid ${colors.border}`,
+                            borderRadius: '4px',
+                            fontSize: '0.75rem',
+                            textDecoration: 'none',
+                            whiteSpace: 'nowrap',
+                            display: 'inline-block'
+                        },
+                        target: "_blank",
+                        title: "Open the document this alert refers to",
+                        children: "View document →"
+                    }),
+                    isMultiple && /*#__PURE__*/ _jsx("button", {
+                        "aria-expanded": expanded,
+                        "data-testid": "translation-alert-group-expand",
+                        onClick: ()=>setExpanded((prev)=>!prev),
+                        style: {
+                            padding: '0.25rem 0.6rem',
+                            background: 'transparent',
+                            color: colors.fg,
+                            border: `1px solid ${colors.border}`,
+                            borderRadius: '4px',
+                            fontSize: '0.75rem',
+                            cursor: 'pointer',
+                            whiteSpace: 'nowrap'
+                        },
+                        type: "button",
+                        children: expanded ? 'Hide details' : `Show ${sorted.length}`
+                    }),
+                    /*#__PURE__*/ _jsx("button", {
+                        disabled: isMultiple ? allBusy : dismissingIds.has(headline.id),
+                        onClick: ()=>isMultiple ? onDismissGroup(groupIds) : onDismiss(headline.id),
+                        style: {
+                            padding: '0.25rem 0.6rem',
+                            background: 'transparent',
+                            color: colors.fg,
+                            border: `1px solid ${colors.border}`,
+                            borderRadius: '4px',
+                            fontSize: '0.75rem',
+                            cursor: 'pointer',
+                            whiteSpace: 'nowrap'
+                        },
+                        title: isMultiple ? 'Dismiss every alert in this group' : 'Dismiss',
+                        type: "button",
+                        children: isMultiple ? 'Dismiss group' : 'Dismiss'
+                    })
+                ]
+            }),
+            isMultiple && expanded && /*#__PURE__*/ _jsx("ul", {
+                style: {
+                    margin: 0,
+                    padding: '0.5rem 0 0.25rem',
+                    listStyle: 'none',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '0.3rem',
+                    borderTop: `1px dashed ${colors.border}`
+                },
+                children: sorted.map((alert)=>{
+                    const alertDoc = alert.collection && alert.documentId ? docHref(basePath, alert.collection, alert.documentId, group.locale) : null;
+                    const busy = dismissingIds.has(alert.id);
+                    return /*#__PURE__*/ _jsxs("li", {
+                        style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            gap: '0.5rem',
+                            fontSize: '0.75rem',
+                            color: 'var(--theme-elevation-900)'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsxs("span", {
+                                style: {
+                                    minWidth: 0,
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis'
+                                },
+                                children: [
+                                    alertDoc ? /*#__PURE__*/ _jsx("a", {
+                                        href: alertDoc,
+                                        rel: "noopener noreferrer",
+                                        style: {
+                                            color: 'var(--theme-success-500)',
+                                            textDecoration: 'none'
+                                        },
+                                        target: "_blank",
+                                        children: /*#__PURE__*/ _jsxs("code", {
+                                            children: [
+                                                alert.collection,
+                                                alert.documentId ? ` #${alert.documentId}` : ''
+                                            ]
+                                        })
+                                    }) : /*#__PURE__*/ _jsx("code", {
+                                        style: {
+                                            color: 'var(--theme-elevation-700)'
+                                        },
+                                        children: alert.collection ?? 'unknown'
+                                    }),
+                                    /*#__PURE__*/ _jsx("span", {
+                                        style: {
+                                            marginLeft: '0.5rem',
+                                            color: 'var(--theme-elevation-700)'
+                                        },
+                                        children: relTime(alert.createdAt)
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("button", {
+                                disabled: busy,
+                                onClick: ()=>onDismiss(alert.id),
+                                style: {
+                                    padding: '0.1rem 0.4rem',
+                                    background: 'transparent',
+                                    color: colors.fg,
+                                    border: `1px solid ${colors.border}`,
+                                    borderRadius: '4px',
+                                    fontSize: '0.7rem',
+                                    cursor: busy ? 'wait' : 'pointer'
+                                },
+                                type: "button",
+                                children: "Dismiss"
+                            })
+                        ]
+                    }, alert.id);
+                })
+            })
+        ]
+    });
+};

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

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

package/dist/views/TranslationHub/AuditPanel.helpers.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Pure helpers extracted from `AuditPanel.tsx` so the reconciliation
+ * logic flagged in v1.2.6 BugIndex NEW-1 / NEW-2 can be unit-tested
+ * without dragging React or `fetch` into the test environment.
+ *
+ *   - `isRealModelId`         — decides whether a `model` string on a
+ *                               usage row counts as an actual model
+ *                               (provider/model slug) vs a provider-only
+ *                               fallback like `'openrouter'` that should
+ *                               collapse into "Failed before model
+ *                               selection". See NEW-2.
+ *   - `summarizeFailedCounts` — reconciles the doc-level "failed" KPI
+ *                               with the per-locale-row "failed" total
+ *                               so the editor sees both numbers labeled.
+ *                               See NEW-1.
+ */
+export type AuditUsageRowLike = {
+    status: 'succeeded' | 'failed';
+    model?: string | null;
+    targetLocales?: Array<{
+        locale: string;
+        status?: 'succeeded' | 'failed' | null;
+    }> | null;
+};
+export declare function isRealModelId(model: string | null | undefined): boolean;
+/**
+ * Two distinct units of "failed" need to be surfaced separately to
+ * reconcile the AuditPanel KPI card with the Target locales table:
+ *
+ *   - `docFailed`    — usage rows whose `status === 'failed'`. One row
+ *                      per (collection, doc, run); the unit the top KPI
+ *                      reports.
+ *   - `localeFailed` — entries in `targetLocales[]` whose status is
+ *                      `'failed'`. A run targeting 2 locales contributes
+ *                      2 entries; the unit the per-locale table reports.
+ *
+ * The two are NOT expected to match — a doc that partially fails counts
+ * once at doc level but multiple times at locale level.
+ */
+export declare function summarizeFailedCounts(rows: AuditUsageRowLike[]): {
+    docFailed: number;
+    localeFailed: number;
+    localeRows: number;
+};