@purposeinplay/payload-ai-translate 0.1.0

package/dist/views/TranslationHub/StatusStrip.js

@@ -0,0 +1,451 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { filterPillColors } from '../shared/filterPillStyle.js';
+import { formatCost } from '../shared/format.js';
+import { useTranslationHubUsageSummary } from './useTranslationHubUsageSummary.js';
+const CARD_STYLE = {
+    flex: 1,
+    padding: '1rem 1.25rem',
+    background: 'var(--theme-elevation-50)',
+    border: '1px solid var(--theme-elevation-150)',
+    borderRadius: '6px'
+};
+const LABEL_STYLE = {
+    margin: 0,
+    fontSize: '0.75rem',
+    fontWeight: 600,
+    textTransform: 'uppercase',
+    letterSpacing: '0.05em',
+    color: 'var(--theme-elevation-500)'
+};
+const VALUE_STYLE = {
+    margin: '0.25rem 0 0',
+    fontSize: '1.5rem',
+    fontWeight: 600,
+    color: 'var(--theme-elevation-1000)'
+};
+const SUBVALUE_STYLE = {
+    margin: '0.25rem 0 0',
+    fontSize: '0.75rem',
+    color: 'var(--theme-elevation-500)'
+};
+function fmtNum(n) {
+    if (n >= 1_000_000) {
+        return `${(n / 1_000_000).toFixed(1)}M`;
+    }
+    if (n >= 1000) {
+        return `${(n / 1000).toFixed(1)}K`;
+    }
+    return n.toString();
+}
+const TIME_RANGE_LABEL = {
+    '7d': 'Last 7 days',
+    '30d': 'Last 30 days',
+    '90d': 'Last 90 days',
+    all: 'All time',
+    custom: 'Custom'
+};
+export const StatusStrip = ({ basePath })=>{
+    const [stats, setStats] = useState(null);
+    const [error, setError] = useState(null);
+    const [range, setRange] = useState('7d');
+    // HUB-5 (v1.2.6): Custom range inputs mirror AuditPanel's pattern.
+    const [customFrom, setCustomFrom] = useState('');
+    const [customTo, setCustomTo] = useState('');
+    // Total translatable surfaces (collections + globals registered in
+    // plugin config). Used to label the per-collection breakdown as
+    // "X of Y active" so editors don't misread `(8)` as "we lost 2
+    // surfaces." See NEW-23.
+    const [totalSurfaces, setTotalSurfaces] = useState(null);
+    useEffect(()=>{
+        let cancelled = false;
+        fetch(`${basePath}/api/ai-translate/client-config`, {
+            credentials: 'include'
+        }).then((r)=>r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))).then((d)=>{
+            if (cancelled) return;
+            setTotalSurfaces(Object.keys(d.translatableFieldsBySlug ?? {}).length);
+        }).catch(()=>{
+        // Non-fatal: the breakdown still renders with just the active count.
+        });
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        basePath
+    ]);
+    // ROUND2-4: switched from per-mount `fetch` + `useEffect` to the
+    // module-level singleton hook. StatusStrip and AuditPanel now share
+    // one in-flight request per `(basePath, range)` key, collapsing the
+    // paired-burst pattern (and the React 18 StrictMode dev-double-render
+    // double-billing) into a single call per Hub mount. Mirrors the
+    // NEW-5 fix to `useBulkTranslateActive`.
+    const rangeKey = useMemo(()=>{
+        if (range === 'custom') {
+            return {
+                kind: 'custom',
+                ...customFrom ? {
+                    from: customFrom
+                } : {},
+                ...customTo ? {
+                    to: customTo
+                } : {}
+            };
+        }
+        return {
+            kind: range
+        };
+    }, [
+        range,
+        customFrom,
+        customTo
+    ]);
+    const { data: summary, error: summaryError, refetch: refetchSummary } = useTranslationHubUsageSummary(basePath, rangeKey);
+    useEffect(()=>{
+        if (summaryError) {
+            setError(summaryError);
+            return;
+        }
+        setError(null);
+        if (!summary) return;
+        const nextStats = {
+            totalRuns: summary.totals.runs,
+            totalSucceeded: summary.totals.succeeded,
+            totalPreserved: summary.totals.preserved ?? 0,
+            totalFailed: summary.totals.failed,
+            totalInputTokens: summary.totals.inputTokens,
+            totalOutputTokens: summary.totals.outputTokens,
+            totalCostUsd: summary.totals.costUsd,
+            truncated: summary.totals.truncated,
+            totalMatching: summary.totals.totalMatching,
+            perCollection: summary.byCollection.map((b)=>({
+                    slug: b.slug,
+                    runs: b.runs,
+                    tokens: b.tokens,
+                    costUsd: b.costUsd
+                }))
+        };
+        setStats(nextStats);
+    }, [
+        summary,
+        summaryError
+    ]);
+    if (error) {
+        return /*#__PURE__*/ _jsxs("div", {
+            style: {
+                padding: '0.5rem 0.75rem',
+                color: 'var(--theme-error-500, #b91c1c)',
+                fontSize: '0.875rem',
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0.75rem',
+                flexWrap: 'wrap'
+            },
+            children: [
+                /*#__PURE__*/ _jsx("span", {
+                    children: "Couldn’t load the translation stats. Refresh the page, or contact engineering if it keeps happening."
+                }),
+                /*#__PURE__*/ _jsx("button", {
+                    onClick: ()=>refetchSummary(),
+                    style: {
+                        padding: '0.3rem 0.75rem',
+                        background: 'transparent',
+                        border: '1px solid var(--theme-error-500, #b91c1c)',
+                        borderRadius: '4px',
+                        color: 'var(--theme-error-500, #b91c1c)',
+                        fontSize: '0.75rem',
+                        fontWeight: 500,
+                        cursor: 'pointer'
+                    },
+                    type: "button",
+                    children: "Retry"
+                })
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.75rem'
+        },
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: '1rem'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            display: 'flex',
+                            gap: '0.25rem',
+                            alignItems: 'center',
+                            flexWrap: 'wrap'
+                        },
+                        children: [
+                            Object.keys(TIME_RANGE_LABEL).map((t)=>{
+                                const isActive = range === t;
+                                const colors = filterPillColors(isActive);
+                                return /*#__PURE__*/ _jsx("button", {
+                                    "aria-pressed": isActive,
+                                    onClick: ()=>setRange(t),
+                                    style: {
+                                        padding: '0.3rem 0.65rem',
+                                        fontSize: '0.75rem',
+                                        background: colors.background,
+                                        border: colors.border,
+                                        borderRadius: '4px',
+                                        color: colors.color,
+                                        cursor: 'pointer',
+                                        fontWeight: isActive ? 600 : 400
+                                    },
+                                    type: "button",
+                                    children: TIME_RANGE_LABEL[t]
+                                }, t);
+                            }),
+                            range === 'custom' && /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    display: 'flex',
+                                    gap: '0.5rem',
+                                    alignItems: 'center',
+                                    marginLeft: '0.5rem'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsxs("label", {
+                                        style: {
+                                            fontSize: '0.75rem',
+                                            color: 'var(--theme-elevation-700)'
+                                        },
+                                        children: [
+                                            "From",
+                                            ' ',
+                                            /*#__PURE__*/ _jsx("input", {
+                                                onChange: (e)=>setCustomFrom(e.target.value),
+                                                style: {
+                                                    padding: '0.25rem',
+                                                    fontSize: '0.75rem'
+                                                },
+                                                type: "date",
+                                                value: customFrom,
+                                                max: customTo || undefined
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("label", {
+                                        style: {
+                                            fontSize: '0.75rem',
+                                            color: 'var(--theme-elevation-700)'
+                                        },
+                                        children: [
+                                            "To",
+                                            ' ',
+                                            /*#__PURE__*/ _jsx("input", {
+                                                onChange: (e)=>setCustomTo(e.target.value),
+                                                style: {
+                                                    padding: '0.25rem',
+                                                    fontSize: '0.75rem'
+                                                },
+                                                type: "date",
+                                                value: customTo,
+                                                min: customFrom || undefined
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    stats?.truncated && /*#__PURE__*/ _jsxs("span", {
+                        style: {
+                            fontSize: '0.75rem',
+                            color: 'var(--theme-warning-500, #d97706)'
+                        },
+                        title: `Showing ${stats.totalRuns} of ${stats.totalMatching} matching rows — totals are partial. Narrow the time range or filter on the underlying collection for full accuracy.`,
+                        children: [
+                            "⚠ Showing ",
+                            stats.totalRuns,
+                            " of ",
+                            stats.totalMatching
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    gap: '1rem'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: CARD_STYLE,
+                        children: [
+                            /*#__PURE__*/ _jsx("p", {
+                                style: LABEL_STYLE,
+                                children: "Total runs"
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                style: VALUE_STYLE,
+                                children: stats ? fmtNum(stats.totalRuns) : '—'
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                style: SUBVALUE_STYLE,
+                                title: "A run counts as succeeded only if it wrote at least one field. Preserved-only runs (no LLM call needed — source unchanged or manual-edit guard) are reported separately to match the Audit & Cost tab.",
+                                children: stats ? `${stats.totalSucceeded} succeeded · ${stats.totalFailed} failed${stats.totalPreserved > 0 ? ` · ${stats.totalPreserved} preserved` : ''}` : 'Loading…'
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: CARD_STYLE,
+                        children: [
+                            /*#__PURE__*/ _jsx("p", {
+                                style: LABEL_STYLE,
+                                children: "Tokens consumed"
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                style: VALUE_STYLE,
+                                children: stats ? fmtNum(stats.totalInputTokens + stats.totalOutputTokens) : '—'
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                style: SUBVALUE_STYLE,
+                                children: stats ? `${fmtNum(stats.totalInputTokens)} in · ${fmtNum(stats.totalOutputTokens)} out` : 'Loading…'
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: CARD_STYLE,
+                        children: [
+                            /*#__PURE__*/ _jsx("p", {
+                                style: LABEL_STYLE,
+                                children: "Estimated cost"
+                            }),
+                            /*#__PURE__*/ _jsx("p", {
+                                style: VALUE_STYLE,
+                                children: stats ? formatCost(stats.totalCostUsd) : '—'
+                            }),
+                            /*#__PURE__*/ _jsxs("p", {
+                                style: SUBVALUE_STYLE,
+                                title: "Pre-computed server-side from per-row cost_usd. Preserved-only and skipped rows contribute zero. Accurate at any window size.",
+                                children: [
+                                    TIME_RANGE_LABEL[range],
+                                    " · server-aggregated from recorded costs"
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            stats && stats.perCollection.length > 1 && /*#__PURE__*/ _jsxs("details", {
+                style: {
+                    padding: '0.5rem 0.75rem',
+                    background: 'var(--theme-elevation-50)',
+                    border: '1px solid var(--theme-elevation-150)',
+                    borderRadius: '6px',
+                    fontSize: '0.8rem'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("summary", {
+                        style: {
+                            cursor: 'pointer',
+                            color: 'var(--theme-elevation-800)',
+                            fontWeight: 500
+                        },
+                        title: totalSurfaces !== null ? `${stats.perCollection.length} surface${stats.perCollection.length === 1 ? '' : 's'} had translation activity in this window. ${totalSurfaces} surface${totalSurfaces === 1 ? ' is' : 's are'} translatable overall.` : undefined,
+                        children: [
+                            "Per-collection breakdown (",
+                            totalSurfaces !== null && totalSurfaces >= stats.perCollection.length ? `${stats.perCollection.length} of ${totalSurfaces} active` : stats.perCollection.length,
+                            ")"
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("table", {
+                        style: {
+                            width: '100%',
+                            borderCollapse: 'collapse',
+                            fontSize: '0.75rem',
+                            marginTop: '0.5rem'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("thead", {
+                                children: /*#__PURE__*/ _jsxs("tr", {
+                                    style: {
+                                        color: 'var(--theme-elevation-500)'
+                                    },
+                                    children: [
+                                        /*#__PURE__*/ _jsx("th", {
+                                            style: {
+                                                textAlign: 'left',
+                                                padding: '0.25rem'
+                                            },
+                                            children: "Collection / global"
+                                        }),
+                                        /*#__PURE__*/ _jsx("th", {
+                                            style: {
+                                                textAlign: 'right',
+                                                padding: '0.25rem'
+                                            },
+                                            children: "Runs"
+                                        }),
+                                        /*#__PURE__*/ _jsx("th", {
+                                            style: {
+                                                textAlign: 'right',
+                                                padding: '0.25rem'
+                                            },
+                                            children: "Tokens"
+                                        }),
+                                        /*#__PURE__*/ _jsx("th", {
+                                            style: {
+                                                textAlign: 'right',
+                                                padding: '0.25rem'
+                                            },
+                                            children: "Cost"
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx("tbody", {
+                                children: stats.perCollection.map((b)=>/*#__PURE__*/ _jsxs("tr", {
+                                        children: [
+                                            /*#__PURE__*/ _jsx("td", {
+                                                style: {
+                                                    padding: '0.25rem'
+                                                },
+                                                children: /*#__PURE__*/ _jsx("code", {
+                                                    children: b.slug
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx("td", {
+                                                style: {
+                                                    padding: '0.25rem',
+                                                    textAlign: 'right',
+                                                    color: 'var(--theme-elevation-800)'
+                                                },
+                                                children: fmtNum(b.runs)
+                                            }),
+                                            /*#__PURE__*/ _jsx("td", {
+                                                style: {
+                                                    padding: '0.25rem',
+                                                    textAlign: 'right',
+                                                    color: 'var(--theme-elevation-800)'
+                                                },
+                                                children: fmtNum(b.tokens)
+                                            }),
+                                            /*#__PURE__*/ _jsx("td", {
+                                                style: {
+                                                    padding: '0.25rem',
+                                                    textAlign: 'right',
+                                                    color: 'var(--theme-elevation-800)'
+                                                },
+                                                children: formatCost(b.costUsd)
+                                            })
+                                        ]
+                                    }, b.slug))
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};

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

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

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

@@ -0,0 +1,69 @@
+/**
+ * Re-exports the pure helper functions from UsageTable.tsx so they can be
+ * unit-tested without importing the full React component (which requires
+ * jsdom and drags in browser-only deps).
+ *
+ * These three functions have zero side effects and no I/O — extracting them
+ * here is the minimal change needed to make them testable. The component
+ * continues to import them from here rather than defining them inline.
+ */
+export type UsageRow = {
+    id: number;
+    kind: 'collection' | 'global';
+    slug: string;
+    documentId?: string | null;
+    status: 'succeeded' | 'failed';
+    sourceLocale: string;
+    succeededCount: number;
+    failedCount: number;
+    fieldsTranslated?: number | null;
+    fieldsHashSkipped?: number | null;
+    fieldsPreserved?: number | null;
+    fieldsSoftSkipped?: number | null;
+    targetLocales?: Array<{
+        locale: string;
+        status?: 'succeeded' | 'failed' | null;
+        error?: string | null;
+        /** Editor-facing code (1.2.5+) used by the UI to render a friendly
+         * per-locale error chip. Empty on legacy rows. */
+        errorCode?: string | null;
+        failedFields?: Array<{
+            path: string;
+        }> | null;
+    }> | null;
+    softSkippedFields?: Array<{
+        path: string;
+        locale: string;
+        reason?: string | null;
+        /** Editor-facing code (1.2.5+) used by the UI to render a friendly
+         * soft-skip reason chip. Empty on legacy rows. */
+        reasonCode?: string | null;
+        /** Source-locale text the AI kept as-is (1.2.8+). Empty on legacy rows. */
+        sourceValue?: string | null;
+    }> | null;
+    preservedFields?: Array<{
+        path: string;
+        locale: string;
+    }> | null;
+    inputTokens: number;
+    outputTokens: number;
+    estimatedCostUsd?: number | null;
+    model?: string | null;
+    durationMs?: number | null;
+    error?: string | null;
+    createdAt: string;
+};
+export type FieldBreakdown = {
+    translated: number;
+    skipped: number;
+    hashSkipped: number;
+    preserved: number;
+    softSkipped: number;
+    failed: number;
+    hasWork: boolean;
+    hasBreakdown: boolean;
+};
+export type DerivedStatus = 'failed' | 'needs-review' | 'succeeded' | 'no-changes' | 'preserved' | 'legacy';
+export declare function deriveBreakdown(r: UsageRow): FieldBreakdown;
+export declare function buildSkippedTooltip(b: FieldBreakdown): string;
+export declare function deriveStatus(r: UsageRow, b: FieldBreakdown): DerivedStatus;

package/dist/views/TranslationHub/UsageTable.helpers.js

@@ -0,0 +1,49 @@
+/**
+ * Re-exports the pure helper functions from UsageTable.tsx so they can be
+ * unit-tested without importing the full React component (which requires
+ * jsdom and drags in browser-only deps).
+ *
+ * These three functions have zero side effects and no I/O — extracting them
+ * here is the minimal change needed to make them testable. The component
+ * continues to import them from here rather than defining them inline.
+ */ // ---------------------------------------------------------------------------
+// Types (duplicated from UsageTable.tsx to keep this file self-contained)
+// ---------------------------------------------------------------------------
+// ---------------------------------------------------------------------------
+// Pure helpers
+// ---------------------------------------------------------------------------
+export function deriveBreakdown(r) {
+    const translated = r.fieldsTranslated ?? 0;
+    const hashSkipped = r.fieldsHashSkipped ?? 0;
+    const preserved = r.fieldsPreserved ?? 0;
+    const softSkipped = r.fieldsSoftSkipped ?? 0;
+    const failed = r.failedCount;
+    const skipped = hashSkipped + preserved + softSkipped;
+    const hasBreakdown = r.fieldsTranslated != null || r.fieldsHashSkipped != null || r.fieldsPreserved != null || r.fieldsSoftSkipped != null;
+    return {
+        translated,
+        skipped,
+        hashSkipped,
+        preserved,
+        softSkipped,
+        failed,
+        hasWork: translated > 0,
+        hasBreakdown
+    };
+}
+export function buildSkippedTooltip(b) {
+    const parts = [];
+    if (b.hashSkipped > 0) parts.push(`${b.hashSkipped} unchanged`);
+    if (b.preserved > 0) parts.push(`${b.preserved} preserved (manual edit)`);
+    if (b.softSkipped > 0) parts.push(`${b.softSkipped} soft-skipped (LLM echo / validator)`);
+    return parts.length === 0 ? '' : `${b.skipped} skipped: ${parts.join(' · ')}`;
+}
+export function deriveStatus(r, b) {
+    if (r.status === 'failed' || b.failed > 0) return 'failed';
+    if (!b.hasBreakdown) return 'legacy';
+    if (b.softSkipped > 0) return 'needs-review';
+    if (b.translated > 0) return 'succeeded';
+    if (b.preserved > 0 && b.hashSkipped === 0) return 'preserved';
+    if (b.hashSkipped > 0) return 'no-changes';
+    return 'legacy';
+}