@purposeinplay/payload-ai-translate 0.1.0

package/dist/views/TranslationHub/UsageTable.js

@@ -0,0 +1,1240 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useConfig } from '@payloadcms/ui';
+import { useEffect, useMemo, useState } from 'react';
+import { editorMessageFor } from '../../lib/error-messages.js';
+import { resolveFieldBreadcrumb } from '../../lib/field-breadcrumb.js';
+import { groupSoftSkipsByValue } from '../../lib/group-soft-skips.js';
+import { docHref as buildDocHref, globalHref } from '../shared/docHref.js';
+import { EditorError } from '../shared/EditorError.js';
+import { readResponseError } from '../shared/fetch-error-body.js';
+import { formatCost, formatDuration } from '../shared/format.js';
+import { ModelCell } from '../shared/ModelCell.js';
+import { deriveBreakdown, deriveStatus } from './UsageTable.helpers.js';
+const SECTION_STYLE = {
+    background: 'var(--theme-elevation-50)',
+    border: '1px solid var(--theme-elevation-150)',
+    borderRadius: '6px',
+    padding: '1rem'
+};
+// NEW-14 (v1.2.6): the wrapping `<div style={{ overflowX: 'auto' }}>`
+// only kicks in when the table is wider than its parent. With
+// `width: 100%` alone the browser tries to collapse columns to fit,
+// silently clipping `whiteSpace: nowrap` cells (cost / duration /
+// when) at <= 640px viewports — the user sees missing columns and no
+// scrollbar cue. Pinning `minWidth: 640px` forces the table to its
+// natural size, so the overflow:auto wrapper renders a visible
+// horizontal scrollbar instead of clipping silently. Matches the
+// established codebase pattern (AuditPanel + BulkRunsHub tables).
+const TABLE_STYLE = {
+    width: '100%',
+    minWidth: '640px',
+    borderCollapse: 'collapse',
+    fontSize: '0.875rem',
+    color: 'var(--theme-elevation-800)'
+};
+const TH_STYLE = {
+    textAlign: 'left',
+    padding: '0.5rem 0.5rem',
+    fontSize: '0.75rem',
+    fontWeight: 600,
+    textTransform: 'uppercase',
+    letterSpacing: '0.05em',
+    color: 'var(--theme-elevation-500)',
+    borderBottom: '1px solid var(--theme-elevation-150)'
+};
+const TD_STYLE = {
+    padding: '0.5rem 0.5rem',
+    borderTop: '1px solid var(--theme-elevation-100)',
+    whiteSpace: 'nowrap'
+};
+const _STATUS_COLORS = {
+    succeeded: 'var(--theme-success-500, #16a34a)',
+    failed: 'var(--theme-error-500, #b91c1c)'
+};
+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`;
+}
+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();
+}
+function resolveCost(r, pricing) {
+    if (r.estimatedCostUsd != null && r.estimatedCostUsd > 0) {
+        return r.estimatedCostUsd;
+    }
+    // Stored 0 / null — try to compute from OpenRouter pricing.
+    if (!r.model) {
+        return null;
+    }
+    const p = pricing.get(r.model);
+    if (!p) {
+        return null;
+    }
+    return r.inputTokens * p.prompt + r.outputTokens * p.completion;
+}
+function docHref(basePath, r, locale) {
+    // Globals: /admin/globals/<slug>. The `documentId` field gets populated
+    // with the slug for globals (cms-plugins persists it that way) — ignore it.
+    if (r.kind === 'global') {
+        return globalHref(basePath, r.slug, locale);
+    }
+    // Collections: need a documentId to point at a row.
+    if (r.documentId) {
+        return buildDocHref(basePath, r.slug, r.documentId, locale);
+    }
+    return null;
+}
+// NEW-3 (v1.2.6): the status text on this table failed WCAG AA — the
+// previous `-500` tokens resolve to mid-tones (`#1587BA` success,
+// `#DA4B48` failed) that miss 4.5:1 against the white row background.
+// Darken to `-800` for the coloured statuses and to `-elevation-900`
+// for the neutral / "no-changes" / "preserved" states; that clears AA
+// while preserving the semantic colour signal. Hex fallbacks updated
+// in lockstep.
+const DERIVED_STATUS_COLOR = {
+    failed: 'var(--theme-error-800, #7f1d1d)',
+    'needs-review': 'var(--theme-warning-800, #78350f)',
+    succeeded: 'var(--theme-success-800, #14532d)',
+    'no-changes': 'var(--theme-elevation-700)',
+    preserved: 'var(--theme-elevation-900)',
+    legacy: 'var(--theme-success-800, #14532d)'
+};
+const DERIVED_STATUS_LABEL = {
+    failed: 'failed',
+    'needs-review': 'needs review',
+    succeeded: 'succeeded',
+    'no-changes': 'no changes',
+    preserved: 'preserved',
+    legacy: 'succeeded'
+};
+function statusTooltipFor(s, b) {
+    switch(s){
+        case 'needs-review':
+            return `${b.softSkipped} field${b.softSkipped === 1 ? '' : 's'} weren’t translated automatically — the AI returned the original text unchanged, or the output didn’t pass quality checks. Open the row to review.`;
+        case 'no-changes':
+            return 'No translation was needed for this run — every field matched the version last translated.';
+        case 'preserved':
+            return `${b.preserved} field${b.preserved === 1 ? '' : 's'} were kept as-is because they were manually edited since the last automatic translation.`;
+        default:
+            return undefined;
+    }
+}
+/**
+ * Renders a list of labelled segments separated by ` · ` interpuncts.
+ * Each segment has a stable string key — separators borrow the next
+ * segment's key (e.g. `sep-f`, `sep-r`) so React's reconciliation is
+ * stable across renders without resorting to array indices.
+ */ function joinSegments(segments) {
+    const out = [];
+    for(let i = 0; i < segments.length; i++){
+        const seg = segments[i];
+        if (!seg) {
+            continue;
+        }
+        if (i > 0) {
+            out.push(/*#__PURE__*/ _jsx("span", {
+                style: {
+                    color: 'var(--theme-elevation-500)'
+                },
+                children: ' · '
+            }, `sep-${seg.key}`));
+        }
+        out.push(seg.node);
+    }
+    return out;
+}
+// Each derived status's Fields-cell label is extracted into its own
+// helper to keep `fieldsLabelFor` under biome's cognitive-complexity
+// ceiling. They each return a FieldsLabel.
+function labelForFailed(b) {
+    const segments = [];
+    if (b.translated > 0) {
+        segments.push({
+            key: 't',
+            node: /*#__PURE__*/ _jsxs("span", {
+                style: {
+                    color: 'var(--theme-elevation-900)'
+                },
+                children: [
+                    b.translated,
+                    " translated"
+                ]
+            }, "t")
+        });
+    }
+    segments.push({
+        key: 'f',
+        node: /*#__PURE__*/ _jsx("span", {
+            style: {
+                color: 'var(--theme-error-800, #7f1d1d)'
+            },
+            children: b.failed > 0 ? `${b.failed} failed` : 'failed'
+        }, "f")
+    });
+    return {
+        primary: joinSegments(segments)
+    };
+}
+function labelForNeedsReview(b) {
+    const segments = [];
+    if (b.translated > 0) {
+        segments.push({
+            key: 't',
+            node: /*#__PURE__*/ _jsxs("span", {
+                style: {
+                    color: 'var(--theme-elevation-900)'
+                },
+                children: [
+                    b.translated,
+                    " translated"
+                ]
+            }, "t")
+        });
+    }
+    segments.push({
+        key: 'r',
+        node: /*#__PURE__*/ _jsxs("span", {
+            style: {
+                color: 'var(--theme-warning-800, #78350f)'
+            },
+            children: [
+                b.softSkipped,
+                " need",
+                b.softSkipped === 1 ? 's' : '',
+                " review"
+            ]
+        }, "r")
+    });
+    return {
+        primary: joinSegments(segments),
+        tooltip: 'Some fields couldn’t be translated automatically. Open the row to see which fields and why.'
+    };
+}
+// Whether the row has anything worth showing in the expansion panel.
+// Plain green "succeeded" with no failures and no soft-skips has
+// nothing to drill into; suppressing the chevron there reduces noise.
+function rowHasDetail(r, status, b) {
+    return (r.targetLocales?.length ?? 0) > 0 || (r.softSkippedFields?.length ?? 0) > 0 || (r.preservedFields?.length ?? 0) > 0 || b.failed > 0 || status === 'failed' || status === 'needs-review';
+}
+// Click handler for the row's outer <tr>. Ignores clicks on
+// interactive children so the doc link / retry button work normally.
+function makeRowClickHandler(hasDetail, toggleExpand, id) {
+    return (e)=>{
+        if (!hasDetail) {
+            return;
+        }
+        const target = e.target;
+        if (target.closest('a, button, input, select, textarea')) {
+            return;
+        }
+        toggleExpand(id);
+    };
+}
+function fieldsLabelFor(s, b) {
+    const totalFields = b.translated + b.hashSkipped + b.preserved + b.softSkipped + b.failed;
+    switch(s){
+        case 'failed':
+            return labelForFailed(b);
+        case 'needs-review':
+            return labelForNeedsReview(b);
+        case 'no-changes':
+            {
+                // Hash-skip wins. No LLM call happened. Don't show "0 translated"
+                // — the user already knows from the status. Be specific about
+                // what's true.
+                const n = b.hashSkipped + b.preserved; // both contribute to no-changes
+                return {
+                    primary: /*#__PURE__*/ _jsxs("span", {
+                        style: {
+                            color: 'var(--theme-elevation-700)'
+                        },
+                        children: [
+                            "All ",
+                            n,
+                            " field",
+                            n === 1 ? '' : 's',
+                            " unchanged since last run"
+                        ]
+                    }),
+                    tooltip: b.preserved > 0 ? `${b.hashSkipped} unchanged · ${b.preserved} kept (manual edit)` : undefined
+                };
+            }
+        case 'preserved':
+            {
+                // Every field was manual-edit-guarded. No LLM, no overwrites.
+                return {
+                    primary: /*#__PURE__*/ _jsxs("span", {
+                        style: {
+                            color: 'var(--theme-elevation-700)'
+                        },
+                        children: [
+                            b.preserved,
+                            " manual edit",
+                            b.preserved === 1 ? '' : 's',
+                            " kept"
+                        ]
+                    }),
+                    tooltip: "Target locale values diverge from the plugin's last-written hash — assumed manual edits, not overwritten."
+                };
+            }
+        case 'succeeded':
+            {
+                // Translation actually happened. May have some hash-skipped too.
+                const parts = [
+                    /*#__PURE__*/ _jsxs("span", {
+                        style: {
+                            color: 'var(--theme-elevation-900)'
+                        },
+                        children: [
+                            b.translated,
+                            " translated"
+                        ]
+                    }, "t")
+                ];
+                if (b.hashSkipped > 0 || b.preserved > 0) {
+                    const skippedNum = b.hashSkipped + b.preserved;
+                    parts.push(/*#__PURE__*/ _jsx("span", {
+                        style: {
+                            color: 'var(--theme-elevation-500)'
+                        },
+                        children: ' · '
+                    }, "sep"));
+                    parts.push(/*#__PURE__*/ _jsxs("span", {
+                        style: {
+                            color: 'var(--theme-elevation-500)'
+                        },
+                        children: [
+                            skippedNum,
+                            " unchanged"
+                        ]
+                    }, "s"));
+                }
+                let succeededTooltip;
+                if (b.preserved > 0) {
+                    succeededTooltip = `${b.hashSkipped} source unchanged · ${b.preserved} kept (manual edit)`;
+                } else if (b.hashSkipped > 0) {
+                    succeededTooltip = 'Source content matched the last-translated hash — no LLM call for these fields.';
+                }
+                return {
+                    primary: parts,
+                    tooltip: succeededTooltip
+                };
+            }
+        default:
+            // Pre-migration row — we don't know what happened, just show
+            // counts based on what's in succeededCount.
+            return {
+                primary: /*#__PURE__*/ _jsx("span", {
+                    style: {
+                        color: 'var(--theme-elevation-500)'
+                    },
+                    children: totalFields > 0 ? `${totalFields} field${totalFields === 1 ? '' : 's'}` : '—'
+                })
+            };
+    }
+}
+// ---------------------------------------------------------------------------
+// Expanded row detail panel
+// ---------------------------------------------------------------------------
+const DETAIL_SECTION_STYLE = {
+    marginBottom: '0.75rem'
+};
+const DETAIL_LABEL_STYLE = {
+    fontSize: '0.7rem',
+    fontWeight: 600,
+    textTransform: 'uppercase',
+    letterSpacing: '0.05em',
+    color: 'var(--theme-elevation-500)',
+    marginBottom: '0.25rem'
+};
+const DETAIL_LIST_STYLE = {
+    margin: 0,
+    padding: 0,
+    listStyle: 'none',
+    fontSize: '0.8rem'
+};
+const RETRY_BUTTON_STYLE = {
+    padding: '0.4rem 0.9rem',
+    background: 'var(--theme-success-500, #16a34a)',
+    color: '#fff',
+    border: 'none',
+    borderRadius: '4px',
+    fontSize: '0.8rem',
+    cursor: 'pointer',
+    fontWeight: 500
+};
+const KEPT_AS_IS_GROUP_STYLE = {
+    padding: '0.6rem 0',
+    borderBottom: '1px solid var(--theme-elevation-100)',
+    fontSize: '0.8rem'
+};
+const KEPT_AS_IS_VALUE_STYLE = {
+    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
+    color: 'var(--theme-elevation-1000)',
+    fontWeight: 600
+};
+const KEPT_AS_IS_META_STYLE = {
+    color: 'var(--theme-elevation-600)',
+    marginTop: '0.2rem'
+};
+const KeptAsIsSection = ({ basePath, row, softSkipped, surfaceFields })=>{
+    const groups = useMemo(()=>groupSoftSkipsByValue(softSkipped), [
+        softSkipped
+    ]);
+    return /*#__PURE__*/ _jsxs("section", {
+        style: DETAIL_SECTION_STYLE,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                style: DETAIL_LABEL_STYLE,
+                children: [
+                    "Kept as English (",
+                    groups.length,
+                    " ",
+                    groups.length === 1 ? 'value' : 'values',
+                    ")"
+                ]
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                style: {
+                    margin: '0 0 0.5rem',
+                    fontSize: '0.75rem',
+                    color: 'var(--theme-elevation-600)'
+                },
+                children: "The AI returned these values unchanged from the source language. Usually a brand name, term, or short label that shouldn’t translate. Open the document on the relevant locale to confirm — or edit manually if a translation was actually needed."
+            }),
+            /*#__PURE__*/ _jsx("ul", {
+                style: {
+                    ...DETAIL_LIST_STYLE,
+                    padding: 0
+                },
+                children: groups.map((g, gi)=>{
+                    const message = g.reasonCode ? editorMessageFor(g.reasonCode, {
+                        locale: g.locales[0] ?? ''
+                    }) : null;
+                    const breadcrumbs = g.paths.map((p)=>resolveFieldBreadcrumb({
+                            path: p,
+                            fields: surfaceFields
+                        }));
+                    const groupKey = g.sourceValue ? `v:${g.sourceValue}:${gi}` : `p:${g.paths.join('|')}:${gi}`;
+                    return /*#__PURE__*/ _jsxs("li", {
+                        style: KEPT_AS_IS_GROUP_STYLE,
+                        children: [
+                            g.sourceValue ? /*#__PURE__*/ _jsx("div", {
+                                children: /*#__PURE__*/ _jsxs("span", {
+                                    style: KEPT_AS_IS_VALUE_STYLE,
+                                    children: [
+                                        "“",
+                                        g.sourceValue,
+                                        "”"
+                                    ]
+                                })
+                            }) : /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    color: 'var(--theme-elevation-700)'
+                                },
+                                children: /*#__PURE__*/ _jsx("em", {
+                                    children: "(source value not recorded — legacy run)"
+                                })
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: KEPT_AS_IS_META_STYLE,
+                                children: [
+                                    "Field:",
+                                    ' ',
+                                    breadcrumbs.map((crumbs, ci)=>/*#__PURE__*/ _jsxs("span", {
+                                            children: [
+                                                ci > 0 && /*#__PURE__*/ _jsx("span", {
+                                                    style: {
+                                                        color: 'var(--theme-elevation-400)'
+                                                    },
+                                                    children: ' · '
+                                                }),
+                                                /*#__PURE__*/ _jsx("span", {
+                                                    style: {
+                                                        color: 'var(--theme-elevation-800)'
+                                                    },
+                                                    children: crumbs.join(' › ')
+                                                })
+                                            ]
+                                        }, g.paths[ci]))
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsxs("div", {
+                                style: KEPT_AS_IS_META_STYLE,
+                                children: [
+                                    "Kept in ",
+                                    g.locales.length,
+                                    " ",
+                                    g.locales.length === 1 ? 'locale' : 'locales',
+                                    ":",
+                                    ' ',
+                                    g.locales.map((loc, li)=>{
+                                        const href = docHref(basePath, row, loc);
+                                        return /*#__PURE__*/ _jsxs("span", {
+                                            children: [
+                                                li > 0 && /*#__PURE__*/ _jsx("span", {
+                                                    style: {
+                                                        color: 'var(--theme-elevation-400)'
+                                                    },
+                                                    children: ', '
+                                                }),
+                                                href ? /*#__PURE__*/ _jsx("a", {
+                                                    href: href,
+                                                    rel: "noopener noreferrer",
+                                                    style: {
+                                                        color: 'var(--theme-success-700, #166534)',
+                                                        textDecoration: 'underline dotted',
+                                                        fontWeight: 500
+                                                    },
+                                                    target: "_blank",
+                                                    title: `Open ${row.slug} on the ${loc} locale`,
+                                                    children: loc
+                                                }) : /*#__PURE__*/ _jsx("span", {
+                                                    style: {
+                                                        color: 'var(--theme-elevation-800)'
+                                                    },
+                                                    children: loc
+                                                })
+                                            ]
+                                        }, loc);
+                                    })
+                                ]
+                            }),
+                            message && /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    ...KEPT_AS_IS_META_STYLE,
+                                    color: 'var(--theme-elevation-700)'
+                                },
+                                title: g.reason ?? message.body,
+                                children: message.body
+                            })
+                        ]
+                    }, groupKey);
+                })
+            })
+        ]
+    });
+};
+const RowDetail = ({ basePath, row, rowStatus, isRetrying, retryError, onRetry })=>{
+    const targetLocales = row.targetLocales ?? [];
+    const softSkipped = row.softSkippedFields ?? [];
+    const preserved = row.preservedFields ?? [];
+    const { config } = useConfig();
+    // Look up the field schema for this surface so the breadcrumb resolver
+    // can turn `sidebar.featured_sidebar_items.3.label` into
+    // `Sidebar Navigation › Featured Sidebar Items › #4 › Label`. Falls
+    // back to a titleized-path render when the schema can't be resolved
+    // (deleted collection, plugin not registered for this surface).
+    const surfaceFields = useMemo(()=>{
+        if (!config) return [];
+        if (row.kind === 'global') {
+            const g = (config.globals ?? []).find((x)=>x?.slug === row.slug);
+            return g?.fields ?? [];
+        }
+        const c = (config.collections ?? []).find((x)=>x?.slug === row.slug);
+        return c?.fields ?? [];
+    }, [
+        config,
+        row.kind,
+        row.slug
+    ]);
+    // Group soft-skipped and preserved by locale so the detail reads
+    // "per-locale" rather than as flat lists. Editors think in locales.
+    const softByLocale = new Map();
+    for (const s of softSkipped){
+        const arr = softByLocale.get(s.locale) ?? [];
+        arr.push(s);
+        softByLocale.set(s.locale, arr);
+    }
+    const preservedByLocale = new Map();
+    for (const p of preserved){
+        const arr = preservedByLocale.get(p.locale) ?? [];
+        arr.push(p);
+        preservedByLocale.set(p.locale, arr);
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        children: [
+            targetLocales.length > 0 && /*#__PURE__*/ _jsxs("section", {
+                style: DETAIL_SECTION_STYLE,
+                children: [
+                    /*#__PURE__*/ _jsx("div", {
+                        style: DETAIL_LABEL_STYLE,
+                        children: "Per-locale outcome"
+                    }),
+                    /*#__PURE__*/ _jsx("ul", {
+                        style: DETAIL_LIST_STYLE,
+                        children: targetLocales.map((tl)=>{
+                            const failedFieldPaths = tl.failedFields?.map((ff)=>ff.path) ?? [];
+                            const localeSoftSkipped = softByLocale.get(tl.locale) ?? [];
+                            const localePreserved = preservedByLocale.get(tl.locale) ?? [];
+                            // Derive per-locale display status:
+                            //   1. If this specific locale failed → 'failed'
+                            //   2. If this locale has soft-skipped fields → 'needs-review'
+                            //   3. Otherwise inherit the row's derived status
+                            // Avoids the prior bug where each locale just echoed
+                            // "succeeded" even on a no-changes / preserved / needs-review run.
+                            let localeStatus = rowStatus;
+                            if (tl.status === 'failed' || failedFieldPaths.length > 0) {
+                                localeStatus = 'failed';
+                            } else if (localeSoftSkipped.length > 0) {
+                                localeStatus = 'needs-review';
+                            }
+                            return /*#__PURE__*/ _jsxs("li", {
+                                style: {
+                                    padding: '0.5rem 0',
+                                    borderBottom: '1px solid var(--theme-elevation-100)'
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        style: {
+                                            display: 'flex',
+                                            gap: '0.5rem',
+                                            alignItems: 'baseline'
+                                        },
+                                        children: [
+                                            (()=>{
+                                                const localeHref = docHref(basePath, row, tl.locale);
+                                                const localeStrong = /*#__PURE__*/ _jsx("strong", {
+                                                    style: {
+                                                        fontFamily: 'monospace',
+                                                        color: 'var(--theme-elevation-1000)'
+                                                    },
+                                                    children: tl.locale
+                                                });
+                                                return localeHref ? /*#__PURE__*/ _jsx("a", {
+                                                    href: localeHref,
+                                                    rel: "noopener noreferrer",
+                                                    style: {
+                                                        color: 'var(--theme-success-500)',
+                                                        textDecoration: 'none'
+                                                    },
+                                                    target: "_blank",
+                                                    title: `Open ${row.slug} in ${tl.locale}`,
+                                                    children: localeStrong
+                                                }) : localeStrong;
+                                            })(),
+                                            /*#__PURE__*/ _jsx("span", {
+                                                style: {
+                                                    color: DERIVED_STATUS_COLOR[localeStatus],
+                                                    fontSize: '0.75rem',
+                                                    fontWeight: 600
+                                                },
+                                                children: DERIVED_STATUS_LABEL[localeStatus]
+                                            })
+                                        ]
+                                    }),
+                                    (tl.errorCode || tl.error) && /*#__PURE__*/ _jsx("div", {
+                                        style: {
+                                            marginTop: '0.35rem'
+                                        },
+                                        children: /*#__PURE__*/ _jsx(EditorError, {
+                                            code: tl.errorCode ?? undefined,
+                                            compact: true,
+                                            context: {
+                                                locale: tl.locale
+                                            },
+                                            details: tl.error ?? undefined,
+                                            hideAction: true
+                                        })
+                                    }),
+                                    failedFieldPaths.length > 0 && /*#__PURE__*/ _jsxs("div", {
+                                        style: {
+                                            marginTop: '0.25rem',
+                                            fontSize: '0.75rem'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx("span", {
+                                                style: {
+                                                    color: 'var(--theme-elevation-500)'
+                                                },
+                                                children: "Failed fields: "
+                                            }),
+                                            failedFieldPaths.map((p, i)=>/*#__PURE__*/ _jsxs("code", {
+                                                    style: {
+                                                        color: 'var(--theme-elevation-800)',
+                                                        marginRight: '0.25rem'
+                                                    },
+                                                    children: [
+                                                        p,
+                                                        i < failedFieldPaths.length - 1 ? ',' : ''
+                                                    ]
+                                                }, p))
+                                        ]
+                                    }),
+                                    localeSoftSkipped.length > 0 && /*#__PURE__*/ _jsxs("div", {
+                                        style: {
+                                            marginTop: '0.25rem',
+                                            fontSize: '0.75rem',
+                                            color: 'var(--theme-elevation-600)'
+                                        },
+                                        children: [
+                                            localeSoftSkipped.length,
+                                            " field",
+                                            localeSoftSkipped.length === 1 ? '' : 's',
+                                            " the AI didn’t translate — see “Kept as English” below."
+                                        ]
+                                    }),
+                                    localePreserved.length > 0 && /*#__PURE__*/ _jsxs("div", {
+                                        style: {
+                                            marginTop: '0.25rem',
+                                            fontSize: '0.75rem'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx("span", {
+                                                style: {
+                                                    color: 'var(--theme-elevation-700)'
+                                                },
+                                                children: "Preserved (manual edits):"
+                                            }),
+                                            ' ',
+                                            localePreserved.map((p, i)=>/*#__PURE__*/ _jsxs("code", {
+                                                    style: {
+                                                        color: 'var(--theme-elevation-800)',
+                                                        marginRight: '0.25rem'
+                                                    },
+                                                    children: [
+                                                        p.path,
+                                                        i < localePreserved.length - 1 ? ',' : ''
+                                                    ]
+                                                }, p.path))
+                                        ]
+                                    })
+                                ]
+                            }, tl.locale);
+                        })
+                    })
+                ]
+            }),
+            softSkipped.length > 0 && /*#__PURE__*/ _jsx(KeptAsIsSection, {
+                basePath: basePath,
+                row: row,
+                softSkipped: softSkipped,
+                surfaceFields: surfaceFields
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    gap: '0.75rem',
+                    alignItems: 'center',
+                    marginTop: '0.5rem'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("button", {
+                        disabled: isRetrying,
+                        onClick: (e)=>{
+                            e.stopPropagation();
+                            onRetry();
+                        },
+                        style: {
+                            ...RETRY_BUTTON_STYLE,
+                            opacity: isRetrying ? 0.6 : 1,
+                            cursor: isRetrying ? 'wait' : 'pointer'
+                        },
+                        type: "button",
+                        children: isRetrying ? 'Retrying…' : 'Retry this translation'
+                    }),
+                    retryError && /*#__PURE__*/ _jsx("span", {
+                        style: {
+                            color: 'var(--theme-error-800, #7f1d1d)',
+                            fontSize: '0.75rem'
+                        },
+                        children: retryError
+                    })
+                ]
+            })
+        ]
+    });
+};
+const UsageRowItem = ({ row: r, basePath, pricing, isExpanded, isRetrying, retryError, onToggleExpand, onRetry })=>{
+    const href = docHref(basePath, r);
+    const breakdown = deriveBreakdown(r);
+    const derivedStatus = deriveStatus(r, breakdown);
+    const fieldsLabel = fieldsLabelFor(derivedStatus, breakdown);
+    const statusLabel = DERIVED_STATUS_LABEL[derivedStatus];
+    const statusColor = DERIVED_STATUS_COLOR[derivedStatus];
+    const statusTitle = statusTooltipFor(derivedStatus, breakdown);
+    const hasDetail = rowHasDetail(r, derivedStatus, breakdown);
+    const onRowClick = makeRowClickHandler(hasDetail, onToggleExpand, r.id);
+    const docLabel = /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("code", {
+                style: {
+                    fontSize: '0.75rem'
+                },
+                children: r.slug
+            }),
+            r.documentId && r.kind === 'collection' && /*#__PURE__*/ _jsxs("span", {
+                style: {
+                    color: 'var(--theme-elevation-500)'
+                },
+                children: [
+                    " #",
+                    r.documentId
+                ]
+            })
+        ]
+    });
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs("tr", {
+                onClick: onRowClick,
+                style: hasDetail ? {
+                    cursor: 'pointer',
+                    background: isExpanded ? 'var(--theme-elevation-100)' : undefined
+                } : undefined,
+                children: [
+                    /*#__PURE__*/ _jsxs("td", {
+                        style: TD_STYLE,
+                        children: [
+                            hasDetail && /*#__PURE__*/ _jsx("span", {
+                                "aria-hidden": "true",
+                                style: {
+                                    display: 'inline-block',
+                                    width: '1rem',
+                                    color: 'var(--theme-elevation-500)',
+                                    fontSize: '0.65rem',
+                                    transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+                                    transition: 'transform 80ms ease',
+                                    marginRight: '0.25rem'
+                                },
+                                children: "▶"
+                            }),
+                            href ? /*#__PURE__*/ _jsx("a", {
+                                href: href,
+                                style: {
+                                    color: 'var(--theme-success-500)',
+                                    textDecoration: 'none'
+                                },
+                                title: `Open ${r.slug}${r.kind === 'collection' && r.documentId ? ` #${r.documentId}` : ''}`,
+                                children: docLabel
+                            }) : docLabel
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("td", {
+                        style: {
+                            ...TD_STYLE,
+                            color: 'var(--theme-elevation-700)',
+                            fontFamily: 'monospace',
+                            fontSize: '0.75rem'
+                        },
+                        children: /*#__PURE__*/ _jsx(ModelCell, {
+                            model: r.model
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("td", {
+                        style: {
+                            ...TD_STYLE,
+                            color: statusColor
+                        },
+                        title: statusTitle,
+                        children: statusLabel
+                    }),
+                    /*#__PURE__*/ _jsx("td", {
+                        style: TD_STYLE,
+                        children: /*#__PURE__*/ _jsx(UsageRowFieldsCell, {
+                            breakdown: breakdown,
+                            label: fieldsLabel,
+                            row: r
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx("td", {
+                        style: TD_STYLE,
+                        children: formatCost(resolveCost(r, pricing))
+                    }),
+                    /*#__PURE__*/ _jsx("td", {
+                        style: TD_STYLE,
+                        children: formatDuration(r.durationMs)
+                    }),
+                    /*#__PURE__*/ _jsx("td", {
+                        style: {
+                            ...TD_STYLE,
+                            color: 'var(--theme-elevation-500)'
+                        },
+                        children: relTime(r.createdAt)
+                    })
+                ]
+            }),
+            isExpanded && hasDetail && /*#__PURE__*/ _jsx("tr", {
+                children: /*#__PURE__*/ _jsx("td", {
+                    colSpan: 7,
+                    style: {
+                        ...TD_STYLE,
+                        background: 'var(--theme-elevation-50)',
+                        whiteSpace: 'normal',
+                        padding: '1rem 1.25rem',
+                        borderTop: 'none'
+                    },
+                    children: /*#__PURE__*/ _jsx(RowDetail, {
+                        basePath: basePath,
+                        isRetrying: isRetrying,
+                        onRetry: onRetry,
+                        retryError: retryError,
+                        row: r,
+                        rowStatus: derivedStatus
+                    })
+                })
+            })
+        ]
+    });
+};
+// Fields-cell render — extracted so UsageRowItem's branching stays
+// minimal. Handles both the breakdown case (current) and the legacy
+// pre-1.1.14 fallback that only had token counts.
+const UsageRowFieldsCell = ({ row, breakdown, label })=>{
+    if (!breakdown.hasBreakdown) {
+        return /*#__PURE__*/ _jsxs("span", {
+            style: {
+                color: 'var(--theme-elevation-500)'
+            },
+            children: [
+                fmtNum(row.inputTokens),
+                " / ",
+                fmtNum(row.outputTokens),
+                " tokens"
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                style: {
+                    cursor: label.tooltip ? 'help' : undefined,
+                    textDecoration: label.tooltip ? 'underline dotted var(--theme-elevation-300)' : undefined
+                },
+                title: label.tooltip || undefined,
+                children: label.primary
+            }),
+            (row.inputTokens > 0 || row.outputTokens > 0) && /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    color: 'var(--theme-elevation-400)',
+                    fontSize: '0.7rem',
+                    marginTop: '0.1rem'
+                },
+                children: [
+                    fmtNum(row.inputTokens),
+                    " in · ",
+                    fmtNum(row.outputTokens),
+                    " out"
+                ]
+            })
+        ]
+    });
+};
+// ---------------------------------------------------------------------------
+// Main table component
+// ---------------------------------------------------------------------------
+export const UsageTable = ({ basePath })=>{
+    const [rows, setRows] = useState(null);
+    const [error, setError] = useState(null);
+    const [filter, setFilter] = useState('all');
+    // OpenRouter rows store `estimated_cost_usd = 0` because the smart
+    // provider doesn't compute cost (pricing varies per sub-model). We
+    // compute it client-side using the catalog's per-token prices for
+    // each model id we see in the rows.
+    const [pricing, setPricing] = useState(new Map());
+    // Per-row expansion state — set of row ids currently expanded.
+    // We don't auto-collapse on data refresh; users sometimes leave a row
+    // open while inspecting and the polling refresh shouldn't clobber it.
+    const [expandedIds, setExpandedIds] = useState(new Set());
+    const [retrying, setRetrying] = useState(new Set());
+    const [retryError, setRetryError] = useState({});
+    function toggleExpand(id) {
+        setExpandedIds((prev)=>{
+            const next = new Set(prev);
+            if (next.has(id)) {
+                next.delete(id);
+            } else {
+                next.add(id);
+            }
+            return next;
+        });
+    }
+    /**
+   * Trigger a retry for a specific row's doc + locales. For collections
+   * we POST to `/api/{slug}/ai-translate` with `{ id, sourceLocale, targetLocales }`;
+   * for globals to `/api/globals/{slug}/ai-translate`. On success, refresh
+   * the usage table so the new row appears at the top.
+   *
+   * `locales` is optional — when omitted, retries ALL locales that
+   * appeared in the original row (so the failed-row default is "retry
+   * everything that ran last time"). When the editor selects a subset
+   * via the UI, only those locales are retried.
+   */ async function retryRow(r, locales) {
+        const id = r.id;
+        setRetryError((prev)=>{
+            const { [id]: _ignored, ...rest } = prev;
+            return rest;
+        });
+        setRetrying((prev)=>new Set(prev).add(id));
+        try {
+            const targetLocales = locales && locales.length > 0 ? locales : (r.targetLocales ?? []).map((tl)=>tl.locale);
+            if (targetLocales.length === 0) {
+                throw new Error('No target locales recorded on this row.');
+            }
+            const endpoint = r.kind === 'collection' ? `${basePath}/api/${r.slug}/ai-translate` : `${basePath}/api/globals/${r.slug}/ai-translate`;
+            const body = r.kind === 'collection' ? {
+                id: r.documentId,
+                sourceLocale: r.sourceLocale,
+                targetLocales
+            } : {
+                sourceLocale: r.sourceLocale,
+                targetLocales
+            };
+            const res = await fetch(endpoint, {
+                method: 'POST',
+                credentials: 'include',
+                headers: {
+                    'content-type': 'application/json'
+                },
+                body: JSON.stringify(body)
+            });
+            if (!res.ok) {
+                const text = await res.text();
+                throw new Error(`HTTP ${res.status}: ${text.slice(0, 200)}`);
+            }
+            // Refresh the table so the new row lands at the top.
+            const usageRes = await fetch(`${basePath}/api/translation-usage?limit=20&sort=-createdAt&depth=0`, {
+                credentials: 'include'
+            });
+            if (usageRes.ok) {
+                const d = await usageRes.json();
+                setRows(d.docs ?? []);
+            }
+        } catch (e) {
+            setRetryError((prev)=>({
+                    ...prev,
+                    [id]: e instanceof Error ? e.message : String(e)
+                }));
+        } finally{
+            setRetrying((prev)=>{
+                const next = new Set(prev);
+                next.delete(id);
+                return next;
+            });
+        }
+    }
+    useEffect(()=>{
+        let cancelled = false;
+        fetch(`${basePath}/api/translation-usage?limit=20&sort=-createdAt&depth=0`, {
+            credentials: 'include'
+        }).then(async (r)=>{
+            if (!r.ok) {
+                throw new Error(await readResponseError(r));
+            }
+            return await r.json();
+        }).then((d)=>{
+            if (cancelled) {
+                return;
+            }
+            setRows(d.docs ?? []);
+        }).catch((e)=>{
+            if (cancelled) {
+                return;
+            }
+            setError(e instanceof Error ? e.message : String(e));
+        });
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        basePath
+    ]);
+    // Fetch model catalog for pricing lookup. Cheap (server-side cached).
+    useEffect(()=>{
+        let cancelled = false;
+        fetch(`${basePath}/api/openrouter/models`, {
+            credentials: 'include'
+        }).then((r)=>r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))).then((d)=>{
+            if (cancelled) {
+                return;
+            }
+            const map = new Map();
+            for (const m of d.models ?? []){
+                if (m.pricing) {
+                    map.set(m.id, {
+                        prompt: Number.parseFloat(m.pricing.prompt),
+                        completion: Number.parseFloat(m.pricing.completion)
+                    });
+                }
+            }
+            setPricing(map);
+        }).catch(()=>{
+        // Non-fatal — Cost column just falls back to stored value.
+        });
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        basePath
+    ]);
+    const filtered = useMemo(()=>(rows ?? []).filter((r)=>filter === 'all' || r.status === filter), [
+        rows,
+        filter
+    ]);
+    return /*#__PURE__*/ _jsxs("section", {
+        style: SECTION_STYLE,
+        children: [
+            /*#__PURE__*/ _jsxs("header", {
+                style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    marginBottom: '0.75rem',
+                    gap: '1rem'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("h2", {
+                        style: {
+                            margin: 0,
+                            fontSize: '1rem',
+                            color: 'var(--theme-elevation-1000)'
+                        },
+                        children: "Recent translations"
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '0.75rem'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsxs("select", {
+                                onChange: (e)=>setFilter(e.target.value),
+                                style: {
+                                    padding: '0.25rem 0.5rem',
+                                    fontSize: '0.875rem',
+                                    background: 'var(--theme-elevation-50)',
+                                    border: '1px solid var(--theme-elevation-150)',
+                                    borderRadius: '4px',
+                                    color: 'var(--theme-elevation-1000)'
+                                },
+                                value: filter,
+                                children: [
+                                    /*#__PURE__*/ _jsx("option", {
+                                        value: "all",
+                                        children: "All statuses"
+                                    }),
+                                    /*#__PURE__*/ _jsx("option", {
+                                        value: "succeeded",
+                                        children: "Succeeded only"
+                                    }),
+                                    /*#__PURE__*/ _jsx("option", {
+                                        value: "failed",
+                                        children: "Failed only"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx("a", {
+                                href: filter === 'all' ? `${basePath}/admin/collections/translation-usage` : `${basePath}/admin/collections/translation-usage?where[status][equals]=${filter}`,
+                                style: {
+                                    fontSize: '0.875rem',
+                                    color: 'var(--theme-success-500)',
+                                    textDecoration: 'none',
+                                    whiteSpace: 'nowrap'
+                                },
+                                children: "View all →"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            error && /*#__PURE__*/ _jsx("p", {
+                style: {
+                    color: 'var(--theme-error-800, #7f1d1d)',
+                    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 && filtered.length === 0 && /*#__PURE__*/ _jsx("p", {
+                style: {
+                    margin: 0,
+                    color: 'var(--theme-elevation-500)',
+                    fontSize: '0.875rem'
+                },
+                children: rows.length === 0 ? 'No translations have run yet. Trigger one from any document.' : `No ${filter} translations in the last 20 runs.`
+            }),
+            rows !== null && filtered.length > 0 && /*#__PURE__*/ _jsx("div", {
+                style: {
+                    overflowX: 'auto'
+                },
+                children: /*#__PURE__*/ _jsxs("table", {
+                    style: TABLE_STYLE,
+                    children: [
+                        /*#__PURE__*/ _jsx("thead", {
+                            children: /*#__PURE__*/ _jsxs("tr", {
+                                children: [
+                                    /*#__PURE__*/ _jsx("th", {
+                                        style: TH_STYLE,
+                                        children: "Collection / doc"
+                                    }),
+                                    /*#__PURE__*/ _jsx("th", {
+                                        style: TH_STYLE,
+                                        children: "Model"
+                                    }),
+                                    /*#__PURE__*/ _jsx("th", {
+                                        style: TH_STYLE,
+                                        children: "Status"
+                                    }),
+                                    /*#__PURE__*/ _jsx("th", {
+                                        style: TH_STYLE,
+                                        children: "Fields"
+                                    }),
+                                    /*#__PURE__*/ _jsx("th", {
+                                        style: TH_STYLE,
+                                        children: "Cost"
+                                    }),
+                                    /*#__PURE__*/ _jsx("th", {
+                                        style: TH_STYLE,
+                                        children: "Duration"
+                                    }),
+                                    /*#__PURE__*/ _jsx("th", {
+                                        style: TH_STYLE,
+                                        children: "When"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ _jsx("tbody", {
+                            children: filtered.map((r)=>/*#__PURE__*/ _jsx(UsageRowItem, {
+                                    basePath: basePath,
+                                    isExpanded: expandedIds.has(r.id),
+                                    isRetrying: retrying.has(r.id),
+                                    onRetry: (locales)=>retryRow(r, locales),
+                                    onToggleExpand: toggleExpand,
+                                    pricing: pricing,
+                                    retryError: retryError[r.id],
+                                    row: r
+                                }, r.id))
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};