@purposeinplay/payload-ai-translate 0.1.0

package/dist/views/TranslationHub/AuditPanel.js

@@ -0,0 +1,1367 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { docHref as buildDocHref, globalHref } from '../shared/docHref.js';
+import { filterPillColors } from '../shared/filterPillStyle.js';
+import { formatCost } from '../shared/format.js';
+import { ModelCell } from '../shared/ModelCell.js';
+import { useTranslationHubUsageSummary } from './useTranslationHubUsageSummary.js';
+const PRESET_LABEL = {
+    '7d': 'Last 7 days',
+    '30d': 'Last 30 days',
+    '90d': 'Last 90 days',
+    all: 'All time',
+    custom: 'Custom'
+};
+const SECTION_STYLE = {
+    background: 'var(--theme-elevation-50)',
+    border: '1px solid var(--theme-elevation-150)',
+    borderRadius: '6px',
+    padding: '1rem 1.25rem'
+};
+const TH_STYLE = {
+    textAlign: 'left',
+    padding: '0.4rem 0.5rem',
+    fontSize: '0.7rem',
+    fontWeight: 600,
+    textTransform: 'uppercase',
+    letterSpacing: '0.05em',
+    color: 'var(--theme-elevation-500)',
+    borderBottom: '1px solid var(--theme-elevation-150)',
+    whiteSpace: 'nowrap',
+    userSelect: 'none'
+};
+// ROUND5-1 (v1.2.6): sortable `th` gets the cursor + role hint. Kept
+// separate from `TH_STYLE` so the non-sortable Recent failures
+// headers stop advertising the same deceptive `cursor: pointer`.
+const SORTABLE_TH_STYLE = {
+    ...TH_STYLE,
+    cursor: 'pointer'
+};
+function nextDir(currentCol, nextCol, currentDir) {
+    // Clicking the same column flips the direction. Clicking a new
+    // column defaults to desc — numeric columns are most useful "biggest
+    // first," and the editor can flip if they want ascending. The text
+    // columns (surface / model / locale) also default to desc → asc on
+    // second click, which feels natural enough.
+    if (currentCol !== nextCol) return 'desc';
+    return currentDir === 'desc' ? 'asc' : 'desc';
+}
+function ariaSortFor(activeCol, thisCol, dir) {
+    if (activeCol !== thisCol) return 'none';
+    return dir === 'asc' ? 'ascending' : 'descending';
+}
+function sortIndicator(activeCol, thisCol, dir) {
+    if (activeCol !== thisCol) return ' —';
+    return dir === 'asc' ? ' ▲' : ' ▼';
+}
+const TD_STYLE = {
+    padding: '0.4rem 0.5rem',
+    fontSize: '0.85rem',
+    color: 'var(--theme-elevation-800)',
+    borderTop: '1px solid var(--theme-elevation-100)'
+};
+// NEW-24 (v1.2.6): reserve minHeight so the Runs / Tokens cards
+// (which sprout a second sub-line when summary lands) don't grow
+// height-wise on first paint. The other three KPI cards only show
+// one line; the min-height is sized to the tallest two so the strip
+// stays uniform.
+const CARD_STYLE = {
+    flex: 1,
+    padding: '0.75rem 1rem',
+    background: 'var(--theme-elevation-50)',
+    border: '1px solid var(--theme-elevation-150)',
+    borderRadius: '6px',
+    minWidth: '120px',
+    minHeight: '5.25rem'
+};
+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();
+}
+// Cost rendering uses the shared `formatCost` helper from
+// `views/shared/format.ts` (NEW-17 — one source of truth across
+// Hub Overview, Audit, Runs, batch rows, drill-down).
+// Shared comparator for the per-collection / per-model breakdown
+// tables. ROUND5-1 (v1.2.6): extended with direction + text-column
+// support so the per-column click handlers below can route through
+// the same helper. Numeric columns sort by raw value; text columns
+// use `localeCompare`.
+function compareSurface(a, b, col, dir) {
+    const mult = dir === 'asc' ? 1 : -1;
+    if (col === 'surface') return a.slug.localeCompare(b.slug) * mult;
+    if (col === 'runs') return (a.runs - b.runs) * mult;
+    if (col === 'tokens') return (a.tokens - b.tokens) * mult;
+    if (col === 'cost') return (a.costUsd - b.costUsd) * mult;
+    // Avg / run — derived. Guard against runs=0 (division by zero).
+    const aAvg = a.runs > 0 ? a.costUsd / a.runs : 0;
+    const bAvg = b.runs > 0 ? b.costUsd / b.runs : 0;
+    return (aAvg - bAvg) * mult;
+}
+function compareModel(a, b, col, dir) {
+    const mult = dir === 'asc' ? 1 : -1;
+    if (col === 'model') return a.model.localeCompare(b.model) * mult;
+    if (col === 'runs') return (a.runs - b.runs) * mult;
+    if (col === 'tokens') return (a.tokens - b.tokens) * mult;
+    return (a.costUsd - b.costUsd) * mult;
+}
+function compareLocale(a, b, col, dir) {
+    const mult = dir === 'asc' ? 1 : -1;
+    if (col === 'locale') return a.locale.localeCompare(b.locale) * mult;
+    if (col === 'runs') return (a.runs - b.runs) * mult;
+    if (col === 'failed') return (a.failed - b.failed) * mult;
+    return (a.successRate - b.successRate) * mult;
+}
+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 docHref(basePath, r, locale) {
+    if (r.kind === 'global') {
+        return globalHref(basePath, r.slug, locale);
+    }
+    if (r.documentId) {
+        return buildDocHref(basePath, r.slug, r.documentId, locale);
+    }
+    return null;
+}
+/**
+ * Recent-failures rows don't carry a single row-level locale — they carry
+ * `targetLocales[]` with individual statuses. The locale that actually
+ * failed (so the editor lands on the right target to verify) is the first
+ * one with `status === 'failed'`. Falls back to the first target locale if
+ * none are explicitly marked failed.
+ */ function failedLocaleFor(r) {
+    const targets = r.targetLocales ?? [];
+    const failed = targets.find((tl)=>tl.status === 'failed');
+    if (failed) {
+        return failed.locale;
+    }
+    return targets[0]?.locale ?? null;
+}
+// NEW-24 (v1.2.6): shimmer placeholder rendered while `rows === null`.
+// Reserves visible vertical space inside each breakdown section so
+// the page settles into its final layout on first paint instead of
+// growing as data arrives. Aria-hidden — the surrounding section
+// header carries the semantic meaning ("Collections & globals").
+const SkeletonLines = ({ count = 3 })=>{
+    const lines = [];
+    for(let i = 0; i < count; i++){
+        lines.push(i);
+    }
+    return /*#__PURE__*/ _jsx("div", {
+        "aria-hidden": "true",
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '0.5rem'
+        },
+        children: lines.map((i)=>/*#__PURE__*/ _jsx("div", {
+                style: {
+                    height: '0.85rem',
+                    background: 'var(--theme-elevation-100)',
+                    borderRadius: '3px',
+                    width: i === count - 1 ? '60%' : '100%'
+                }
+            }, i))
+    });
+};
+export const AuditPanel = ({ basePath })=>{
+    // ROUND2-2: default range was '30d' while Hub Overview defaults to
+    // '7d'. Switching tabs without re-clicking a pill silently changed
+    // the window so editors compared apples to oranges. Both tabs now
+    // default to the same range.
+    const [preset, setPreset] = useState('7d');
+    const [customFrom, setCustomFrom] = useState('');
+    const [customTo, setCustomTo] = useState('');
+    const [summaryData, setSummaryData] = useState(null);
+    const [error, setError] = useState(null);
+    // ROUND5-1 (v1.2.6): per-table sort state. The global pill row
+    // (`Sort breakdown tables by [cost / runs / tokens]`) is a
+    // convenience cross-table shortcut — clicking a pill routes the
+    // matching column into each table's state (preserves the existing
+    // affordance). Per-column header clicks update only that table's
+    // state.
+    const [surfaceSort, setSurfaceSort] = useState({
+        col: 'cost',
+        dir: 'desc'
+    });
+    const [modelSort, setModelSort] = useState({
+        col: 'cost',
+        dir: 'desc'
+    });
+    const [localeSort, setLocaleSort] = useState({
+        col: 'runs',
+        dir: 'desc'
+    });
+    // Total translatable surfaces (collections + globals registered in
+    // plugin config). Used to label the breakdown headers as
+    // "X of Y active" so editors don't misread the count as "we lost
+    // some surfaces." See NEW-23 — mirrors StatusStrip.
+    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 header still renders with just the active count.
+        });
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        basePath
+    ]);
+    // ROUND2-4: switched to the singleton hook so Hub Overview's
+    // StatusStrip and this tab share the same in-flight request when
+    // they're both mounted under the same `(basePath, range)`. Mirrors
+    // NEW-5 / `useBulkTranslateActive`. Removes the StrictMode dev-
+    // double-fetch and the paired-burst pattern.
+    const rangeKey = useMemo(()=>{
+        if (preset === 'custom') {
+            return {
+                kind: 'custom',
+                ...customFrom ? {
+                    from: customFrom
+                } : {},
+                ...customTo ? {
+                    to: customTo
+                } : {}
+            };
+        }
+        return {
+            kind: preset
+        };
+    }, [
+        preset,
+        customFrom,
+        customTo
+    ]);
+    const { data: hookData, error: hookError, refetch: refetchSummary } = useTranslationHubUsageSummary(basePath, rangeKey);
+    useEffect(()=>{
+        if (hookError) {
+            setError(hookError);
+            return;
+        }
+        setError(null);
+        if (hookData) {
+            // The hook's shape matches `UsageSummary` exactly (same endpoint),
+            // so the assignment is a no-op rename — kept the local
+            // `summaryData` state for diff minimality with the rest of the
+            // file that reads from it.
+            setSummaryData(hookData);
+        }
+    }, [
+        hookData,
+        hookError
+    ]);
+    const summary = summaryData ? {
+        runs: summaryData.totals.runs,
+        succeeded: summaryData.totals.succeeded,
+        // ROUND2-2: surfaced alongside `succeeded`/`failed` so the
+        // editor sees the same numbers Overview reports.
+        preserved: summaryData.totals.preserved ?? 0,
+        failed: summaryData.totals.failed,
+        inputTokens: summaryData.totals.inputTokens,
+        outputTokens: summaryData.totals.outputTokens,
+        cost: summaryData.totals.costUsd,
+        avgCost: summaryData.totals.runs > 0 ? summaryData.totals.costUsd / summaryData.totals.runs : 0,
+        // ROUND2-2: success rate now treats preserved runs as
+        // not-failures (the LLM had nothing new to write — that's a
+        // healthy outcome, not a failure). Denominator stays at total
+        // runs so the percentage is comparable across windows.
+        successRate: summaryData.totals.runs > 0 ? (summaryData.totals.succeeded + (summaryData.totals.preserved ?? 0)) / summaryData.totals.runs * 100 : 0,
+        // Reconciliation of locale-rows vs doc-failed (NEW-1) — the
+        // endpoint reports both; the UI shows them side-by-side in the
+        // top KPI card.
+        localeRows: summaryData.byLocale.reduce((sum, l)=>sum + l.runs, 0),
+        localeFailed: summaryData.byLocale.reduce((sum, l)=>sum + l.failed, 0)
+    } : null;
+    const perCollection = summaryData ? [
+        ...summaryData.byCollection
+    ].sort((a, b)=>compareSurface(a, b, surfaceSort.col, surfaceSort.dir)) : [];
+    // Per-model breakdown. The endpoint already collapses provider-only
+    // and null-model rows into a single `__unresolved__` bucket (mirrors
+    // the old client-side `isRealModelId` rule — NEW-2). We split it
+    // back out so the existing "Failed before model selection" row
+    // renders unchanged.
+    const perModel = summaryData ? (()=>{
+        const real = [];
+        let unresolved = null;
+        for (const b of summaryData.byModel){
+            if (b.model === '__unresolved__') {
+                unresolved = {
+                    runs: b.runs,
+                    tokens: b.tokens,
+                    costUsd: b.costUsd
+                };
+            } else {
+                real.push(b);
+            }
+        }
+        real.sort((a, b)=>compareModel(a, b, modelSort.col, modelSort.dir));
+        return {
+            real,
+            unresolved
+        };
+    })() : {
+        real: [],
+        unresolved: null
+    };
+    const perLocale = summaryData ? summaryData.byLocale.map((b)=>({
+            locale: b.locale,
+            runs: b.runs,
+            failed: b.failed,
+            successRate: b.runs > 0 ? (b.runs - b.failed) / b.runs * 100 : 0
+        })).sort((a, b)=>compareLocale(a, b, localeSort.col, localeSort.dir)) : [];
+    // Recent failures pulls from the endpoint's `samples` (most-recent 20
+    // rows in the window, regardless of status). Filter client-side to
+    // failed rows. The "Recent translations" table on Overview still
+    // uses `/translation-usage?limit=20` directly — that's a separate
+    // surface (UsageTable.tsx).
+    const recentFailures = summaryData ? summaryData.samples.filter((r)=>r.status === 'failed').slice(0, 10) : [];
+    // With server-side aggregation the totals are always complete; the
+    // truncation chip never fires unless the endpoint reports it back.
+    const truncated = summaryData?.totals.truncated ?? false;
+    const totalDocs = summaryData?.totals.totalMatching ?? 0;
+    // NEW-24 (v1.2.6): the four breakdown tables grow when usage data
+    // arrives, causing visible "popcorn" CLS on the initial paint. We
+    // reserve a min-height on each section so the page settles into its
+    // final layout immediately; the loading branches render a low-key
+    // shimmer line instead of the empty-state message so the eye knows
+    // data is en route.
+    const loading = summaryData === null;
+    const SECTION_MIN_HEIGHT = '8rem';
+    return /*#__PURE__*/ _jsxs("div", {
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: '1rem'
+        },
+        children: [
+            error && /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    ...SECTION_STYLE,
+                    background: 'var(--theme-error-100, #fee2e2)',
+                    color: 'var(--theme-error-500, #b91c1c)',
+                    fontSize: '0.875rem',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: '0.75rem'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("span", {
+                        children: [
+                            "Failed to load: ",
+                            error
+                        ]
+                    }),
+                    /*#__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"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx("section", {
+                style: SECTION_STYLE,
+                children: /*#__PURE__*/ _jsxs("div", {
+                    style: {
+                        display: 'flex',
+                        gap: '0.5rem',
+                        alignItems: 'center',
+                        flexWrap: 'wrap'
+                    },
+                    children: [
+                        Object.keys(PRESET_LABEL).map((p)=>{
+                            const isActive = preset === p;
+                            const colors = filterPillColors(isActive);
+                            return /*#__PURE__*/ _jsx("button", {
+                                "aria-pressed": isActive,
+                                onClick: ()=>setPreset(p),
+                                style: {
+                                    padding: '0.35rem 0.75rem',
+                                    fontSize: '0.8rem',
+                                    background: colors.background,
+                                    border: colors.border,
+                                    borderRadius: '4px',
+                                    color: colors.color,
+                                    cursor: 'pointer',
+                                    fontWeight: isActive ? 600 : 400
+                                },
+                                type: "button",
+                                children: PRESET_LABEL[p]
+                            }, p);
+                        }),
+                        preset === 'custom' && /*#__PURE__*/ _jsxs("div", {
+                            style: {
+                                display: 'flex',
+                                gap: '0.5rem',
+                                alignItems: 'center',
+                                marginLeft: '0.5rem'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsxs("label", {
+                                    style: {
+                                        fontSize: '0.8rem',
+                                        color: 'var(--theme-elevation-700)'
+                                    },
+                                    children: [
+                                        "From",
+                                        ' ',
+                                        /*#__PURE__*/ _jsx("input", {
+                                            onChange: (e)=>setCustomFrom(e.target.value),
+                                            style: {
+                                                padding: '0.25rem',
+                                                fontSize: '0.8rem'
+                                            },
+                                            type: "date",
+                                            value: customFrom
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsxs("label", {
+                                    style: {
+                                        fontSize: '0.8rem',
+                                        color: 'var(--theme-elevation-700)'
+                                    },
+                                    children: [
+                                        "To",
+                                        ' ',
+                                        /*#__PURE__*/ _jsx("input", {
+                                            onChange: (e)=>setCustomTo(e.target.value),
+                                            style: {
+                                                padding: '0.25rem',
+                                                fontSize: '0.8rem'
+                                            },
+                                            type: "date",
+                                            value: customTo
+                                        })
+                                    ]
+                                })
+                            ]
+                        }),
+                        truncated && /*#__PURE__*/ _jsxs("span", {
+                            style: {
+                                marginLeft: 'auto',
+                                fontSize: '0.75rem',
+                                color: 'var(--theme-warning-500, #d97706)'
+                            },
+                            title: `Showing ${summaryData?.totals.runs ?? 0} of ${totalDocs} rows. Narrow the date range for complete totals.`,
+                            children: [
+                                "⚠ Showing first ",
+                                summaryData?.totals.runs ?? 0,
+                                " of ",
+                                totalDocs
+                            ]
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    gap: '0.75rem',
+                    flexWrap: 'wrap'
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: CARD_STYLE,
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    fontSize: '0.7rem',
+                                    color: 'var(--theme-elevation-500)',
+                                    textTransform: 'uppercase',
+                                    fontWeight: 600
+                                },
+                                children: "Total spend"
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    fontSize: '1.5rem',
+                                    fontWeight: 600,
+                                    marginTop: '0.25rem'
+                                },
+                                children: summary ? formatCost(summary.cost) : '—'
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: CARD_STYLE,
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    fontSize: '0.7rem',
+                                    color: 'var(--theme-elevation-500)',
+                                    textTransform: 'uppercase',
+                                    fontWeight: 600
+                                },
+                                children: "Runs"
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    fontSize: '1.5rem',
+                                    fontWeight: 600,
+                                    marginTop: '0.25rem'
+                                },
+                                children: summary ? fmtNum(summary.runs) : '—'
+                            }),
+                            summary && /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    fontSize: '0.7rem',
+                                    color: 'var(--theme-elevation-500)',
+                                    marginTop: '0.15rem'
+                                },
+                                title: "Doc-level outcomes: a doc counts as one run regardless of how many target locales it covered. `docs ok` = wrote at least one field; `preserved` = no new fields needed translating; `docs failed` = the run errored. Per-locale failure counts live in the Target locales table below.",
+                                children: [
+                                    summary.succeeded,
+                                    " docs ok · ",
+                                    summary.failed,
+                                    " docs failed",
+                                    summary.preserved > 0 && /*#__PURE__*/ _jsxs(_Fragment, {
+                                        children: [
+                                            " · ",
+                                            summary.preserved,
+                                            " preserved"
+                                        ]
+                                    }),
+                                    summary.localeFailed > summary.failed && /*#__PURE__*/ _jsxs(_Fragment, {
+                                        children: [
+                                            ' ',
+                                            "·",
+                                            ' ',
+                                            /*#__PURE__*/ _jsxs("span", {
+                                                style: {
+                                                    color: 'var(--theme-elevation-700)'
+                                                },
+                                                children: [
+                                                    summary.localeFailed,
+                                                    " locale-rows failed"
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: CARD_STYLE,
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    fontSize: '0.7rem',
+                                    color: 'var(--theme-elevation-500)',
+                                    textTransform: 'uppercase',
+                                    fontWeight: 600
+                                },
+                                children: "Avg cost / run"
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    fontSize: '1.5rem',
+                                    fontWeight: 600,
+                                    marginTop: '0.25rem'
+                                },
+                                children: summary ? formatCost(summary.avgCost) : '—'
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: CARD_STYLE,
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    fontSize: '0.7rem',
+                                    color: 'var(--theme-elevation-500)',
+                                    textTransform: 'uppercase',
+                                    fontWeight: 600
+                                },
+                                children: "Tokens"
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    fontSize: '1.5rem',
+                                    fontWeight: 600,
+                                    marginTop: '0.25rem'
+                                },
+                                children: summary ? fmtNum(summary.inputTokens + summary.outputTokens) : '—'
+                            }),
+                            summary && /*#__PURE__*/ _jsxs("div", {
+                                style: {
+                                    fontSize: '0.7rem',
+                                    color: 'var(--theme-elevation-500)',
+                                    marginTop: '0.15rem'
+                                },
+                                children: [
+                                    fmtNum(summary.inputTokens),
+                                    " in · ",
+                                    fmtNum(summary.outputTokens),
+                                    " out"
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs("div", {
+                        style: CARD_STYLE,
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    fontSize: '0.7rem',
+                                    color: 'var(--theme-elevation-500)',
+                                    textTransform: 'uppercase',
+                                    fontWeight: 600
+                                },
+                                children: "Success rate"
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                style: {
+                                    fontSize: '1.5rem',
+                                    fontWeight: 600,
+                                    marginTop: '0.25rem'
+                                },
+                                children: summary ? `${summary.successRate.toFixed(1)}%` : '—'
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                style: {
+                    display: 'flex',
+                    gap: '0.5rem',
+                    alignItems: 'center'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        style: {
+                            fontSize: '0.75rem',
+                            color: 'var(--theme-elevation-500)'
+                        },
+                        children: "Sort breakdown tables by:"
+                    }),
+                    [
+                        'cost',
+                        'runs',
+                        'tokens'
+                    ].map((k)=>{
+                        // The pill is "active" only when all three tables agree on
+                        // the equivalent column. For Locales, `cost` has no direct
+                        // analogue so the pill goes inactive whenever Locales is on
+                        // a non-mapped column.
+                        const surfaceMatches = surfaceSort.col === k;
+                        const modelMatches = modelSort.col === k;
+                        const localeMatches = k === 'runs' && localeSort.col === 'runs' || k === 'cost' && localeSort.col === 'failed' || k === 'tokens' && localeSort.col === 'successRate';
+                        const isActive = surfaceMatches && modelMatches && localeMatches;
+                        const colors = filterPillColors(isActive);
+                        return /*#__PURE__*/ _jsx("button", {
+                            "aria-pressed": isActive,
+                            onClick: ()=>{
+                                setSurfaceSort({
+                                    col: k,
+                                    dir: 'desc'
+                                });
+                                setModelSort({
+                                    col: k,
+                                    dir: 'desc'
+                                });
+                                if (k === 'runs') setLocaleSort({
+                                    col: 'runs',
+                                    dir: 'desc'
+                                });
+                                else if (k === 'cost') setLocaleSort({
+                                    col: 'failed',
+                                    dir: 'desc'
+                                });
+                                else setLocaleSort({
+                                    col: 'successRate',
+                                    dir: 'desc'
+                                });
+                            },
+                            style: {
+                                padding: '0.25rem 0.55rem',
+                                fontSize: '0.75rem',
+                                background: colors.background,
+                                border: colors.border,
+                                borderRadius: '4px',
+                                color: colors.color,
+                                cursor: 'pointer',
+                                fontWeight: isActive ? 600 : 400
+                            },
+                            type: "button",
+                            children: k
+                        }, k);
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("section", {
+                style: {
+                    ...SECTION_STYLE,
+                    minHeight: SECTION_MIN_HEIGHT
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("h3", {
+                        style: {
+                            margin: '0 0 0.5rem',
+                            fontSize: '0.95rem',
+                            color: 'var(--theme-elevation-1000)'
+                        },
+                        children: [
+                            "Collections & globals (",
+                            loading ? '…' : totalSurfaces !== null && totalSurfaces >= perCollection.length ? `${perCollection.length} of ${totalSurfaces} active` : perCollection.length,
+                            ")"
+                        ]
+                    }),
+                    loading ? /*#__PURE__*/ _jsx(SkeletonLines, {}) : perCollection.length === 0 ? /*#__PURE__*/ _jsx("p", {
+                        style: {
+                            margin: 0,
+                            fontSize: '0.85rem',
+                            color: 'var(--theme-elevation-500)'
+                        },
+                        children: "No translation activity in this range."
+                    }) : /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            overflowX: 'auto'
+                        },
+                        children: /*#__PURE__*/ _jsxs("table", {
+                            style: {
+                                width: '100%',
+                                borderCollapse: 'collapse',
+                                fontSize: '0.85rem'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx("thead", {
+                                    children: /*#__PURE__*/ _jsxs("tr", {
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("th", {
+                                                "aria-sort": ariaSortFor(surfaceSort.col, 'surface', surfaceSort.dir),
+                                                onClick: ()=>setSurfaceSort((s)=>({
+                                                            col: 'surface',
+                                                            dir: nextDir(s.col, 'surface', s.dir)
+                                                        })),
+                                                style: SORTABLE_TH_STYLE,
+                                                children: [
+                                                    "Surface",
+                                                    sortIndicator(surfaceSort.col, 'surface', surfaceSort.dir)
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("th", {
+                                                "aria-sort": ariaSortFor(surfaceSort.col, 'runs', surfaceSort.dir),
+                                                onClick: ()=>setSurfaceSort((s)=>({
+                                                            col: 'runs',
+                                                            dir: nextDir(s.col, 'runs', s.dir)
+                                                        })),
+                                                style: {
+                                                    ...SORTABLE_TH_STYLE,
+                                                    textAlign: 'right'
+                                                },
+                                                children: [
+                                                    "Runs",
+                                                    sortIndicator(surfaceSort.col, 'runs', surfaceSort.dir)
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("th", {
+                                                "aria-sort": ariaSortFor(surfaceSort.col, 'tokens', surfaceSort.dir),
+                                                onClick: ()=>setSurfaceSort((s)=>({
+                                                            col: 'tokens',
+                                                            dir: nextDir(s.col, 'tokens', s.dir)
+                                                        })),
+                                                style: {
+                                                    ...SORTABLE_TH_STYLE,
+                                                    textAlign: 'right'
+                                                },
+                                                children: [
+                                                    "Tokens",
+                                                    sortIndicator(surfaceSort.col, 'tokens', surfaceSort.dir)
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("th", {
+                                                "aria-sort": ariaSortFor(surfaceSort.col, 'cost', surfaceSort.dir),
+                                                onClick: ()=>setSurfaceSort((s)=>({
+                                                            col: 'cost',
+                                                            dir: nextDir(s.col, 'cost', s.dir)
+                                                        })),
+                                                style: {
+                                                    ...SORTABLE_TH_STYLE,
+                                                    textAlign: 'right'
+                                                },
+                                                children: [
+                                                    "Total cost",
+                                                    sortIndicator(surfaceSort.col, 'cost', surfaceSort.dir)
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("th", {
+                                                "aria-sort": ariaSortFor(surfaceSort.col, 'avg', surfaceSort.dir),
+                                                onClick: ()=>setSurfaceSort((s)=>({
+                                                            col: 'avg',
+                                                            dir: nextDir(s.col, 'avg', s.dir)
+                                                        })),
+                                                style: {
+                                                    ...SORTABLE_TH_STYLE,
+                                                    textAlign: 'right'
+                                                },
+                                                children: [
+                                                    "Avg / run",
+                                                    sortIndicator(surfaceSort.col, 'avg', surfaceSort.dir)
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx("tbody", {
+                                    children: perCollection.map((b)=>/*#__PURE__*/ _jsxs("tr", {
+                                            children: [
+                                                /*#__PURE__*/ _jsxs("td", {
+                                                    style: TD_STYLE,
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx("code", {
+                                                            children: b.slug
+                                                        }),
+                                                        /*#__PURE__*/ _jsx("span", {
+                                                            style: {
+                                                                marginLeft: '0.4rem',
+                                                                color: 'var(--theme-elevation-500)',
+                                                                fontSize: '0.7rem'
+                                                            },
+                                                            children: b.kind
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ _jsx("td", {
+                                                    style: {
+                                                        ...TD_STYLE,
+                                                        textAlign: 'right'
+                                                    },
+                                                    children: fmtNum(b.runs)
+                                                }),
+                                                /*#__PURE__*/ _jsx("td", {
+                                                    style: {
+                                                        ...TD_STYLE,
+                                                        textAlign: 'right'
+                                                    },
+                                                    children: fmtNum(b.tokens)
+                                                }),
+                                                /*#__PURE__*/ _jsx("td", {
+                                                    style: {
+                                                        ...TD_STYLE,
+                                                        textAlign: 'right'
+                                                    },
+                                                    children: formatCost(b.costUsd)
+                                                }),
+                                                /*#__PURE__*/ _jsx("td", {
+                                                    style: {
+                                                        ...TD_STYLE,
+                                                        textAlign: 'right',
+                                                        color: 'var(--theme-elevation-700)'
+                                                    },
+                                                    children: formatCost(b.runs > 0 ? b.costUsd / b.runs : 0)
+                                                })
+                                            ]
+                                        }, `${b.kind}:${b.slug}`))
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("section", {
+                style: {
+                    ...SECTION_STYLE,
+                    minHeight: SECTION_MIN_HEIGHT
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("h3", {
+                        style: {
+                            margin: '0 0 0.5rem',
+                            fontSize: '0.95rem',
+                            color: 'var(--theme-elevation-1000)'
+                        },
+                        children: [
+                            "Models (",
+                            loading ? '…' : perModel.real.length,
+                            ")"
+                        ]
+                    }),
+                    loading ? /*#__PURE__*/ _jsx(SkeletonLines, {}) : perModel.real.length === 0 && perModel.unresolved === null ? /*#__PURE__*/ _jsx("p", {
+                        style: {
+                            margin: 0,
+                            fontSize: '0.85rem',
+                            color: 'var(--theme-elevation-500)'
+                        },
+                        children: "No model usage in this range."
+                    }) : /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            overflowX: 'auto'
+                        },
+                        children: /*#__PURE__*/ _jsxs("table", {
+                            style: {
+                                width: '100%',
+                                borderCollapse: 'collapse',
+                                fontSize: '0.85rem'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx("thead", {
+                                    children: /*#__PURE__*/ _jsxs("tr", {
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("th", {
+                                                "aria-sort": ariaSortFor(modelSort.col, 'model', modelSort.dir),
+                                                onClick: ()=>setModelSort((s)=>({
+                                                            col: 'model',
+                                                            dir: nextDir(s.col, 'model', s.dir)
+                                                        })),
+                                                style: SORTABLE_TH_STYLE,
+                                                children: [
+                                                    "Model",
+                                                    sortIndicator(modelSort.col, 'model', modelSort.dir)
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("th", {
+                                                "aria-sort": ariaSortFor(modelSort.col, 'runs', modelSort.dir),
+                                                onClick: ()=>setModelSort((s)=>({
+                                                            col: 'runs',
+                                                            dir: nextDir(s.col, 'runs', s.dir)
+                                                        })),
+                                                style: {
+                                                    ...SORTABLE_TH_STYLE,
+                                                    textAlign: 'right'
+                                                },
+                                                children: [
+                                                    "Runs",
+                                                    sortIndicator(modelSort.col, 'runs', modelSort.dir)
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("th", {
+                                                "aria-sort": ariaSortFor(modelSort.col, 'tokens', modelSort.dir),
+                                                onClick: ()=>setModelSort((s)=>({
+                                                            col: 'tokens',
+                                                            dir: nextDir(s.col, 'tokens', s.dir)
+                                                        })),
+                                                style: {
+                                                    ...SORTABLE_TH_STYLE,
+                                                    textAlign: 'right'
+                                                },
+                                                children: [
+                                                    "Tokens",
+                                                    sortIndicator(modelSort.col, 'tokens', modelSort.dir)
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("th", {
+                                                "aria-sort": ariaSortFor(modelSort.col, 'cost', modelSort.dir),
+                                                onClick: ()=>setModelSort((s)=>({
+                                                            col: 'cost',
+                                                            dir: nextDir(s.col, 'cost', s.dir)
+                                                        })),
+                                                style: {
+                                                    ...SORTABLE_TH_STYLE,
+                                                    textAlign: 'right'
+                                                },
+                                                children: [
+                                                    "Cost",
+                                                    sortIndicator(modelSort.col, 'cost', modelSort.dir)
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsxs("tbody", {
+                                    children: [
+                                        perModel.real.map((b)=>/*#__PURE__*/ _jsxs("tr", {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        style: {
+                                                            ...TD_STYLE,
+                                                            fontFamily: 'monospace',
+                                                            fontSize: '0.75rem'
+                                                        },
+                                                        children: b.model
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        style: {
+                                                            ...TD_STYLE,
+                                                            textAlign: 'right'
+                                                        },
+                                                        children: fmtNum(b.runs)
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        style: {
+                                                            ...TD_STYLE,
+                                                            textAlign: 'right'
+                                                        },
+                                                        children: fmtNum(b.tokens)
+                                                    }),
+                                                    /*#__PURE__*/ _jsx("td", {
+                                                        style: {
+                                                            ...TD_STYLE,
+                                                            textAlign: 'right'
+                                                        },
+                                                        children: formatCost(b.costUsd)
+                                                    })
+                                                ]
+                                            }, b.model)),
+                                        perModel.unresolved && /*#__PURE__*/ _jsxs("tr", {
+                                            children: [
+                                                /*#__PURE__*/ _jsx("td", {
+                                                    style: {
+                                                        ...TD_STYLE,
+                                                        fontSize: '0.75rem',
+                                                        color: 'var(--theme-elevation-600)',
+                                                        fontStyle: 'italic'
+                                                    },
+                                                    title: "These runs failed before a specific model handled them (auth error, missing config, provider rejected the request). They consumed no tokens.",
+                                                    children: "Failed before model selection"
+                                                }),
+                                                /*#__PURE__*/ _jsx("td", {
+                                                    style: {
+                                                        ...TD_STYLE,
+                                                        textAlign: 'right',
+                                                        color: 'var(--theme-elevation-600)'
+                                                    },
+                                                    children: fmtNum(perModel.unresolved.runs)
+                                                }),
+                                                /*#__PURE__*/ _jsx("td", {
+                                                    style: {
+                                                        ...TD_STYLE,
+                                                        textAlign: 'right',
+                                                        color: 'var(--theme-elevation-500)'
+                                                    },
+                                                    children: "—"
+                                                }),
+                                                /*#__PURE__*/ _jsx("td", {
+                                                    style: {
+                                                        ...TD_STYLE,
+                                                        textAlign: 'right',
+                                                        color: 'var(--theme-elevation-500)'
+                                                    },
+                                                    children: "—"
+                                                })
+                                            ]
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("section", {
+                style: {
+                    ...SECTION_STYLE,
+                    minHeight: SECTION_MIN_HEIGHT
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("h3", {
+                        style: {
+                            margin: '0 0 0.5rem',
+                            fontSize: '0.95rem',
+                            color: 'var(--theme-elevation-1000)'
+                        },
+                        children: [
+                            "Target locales (",
+                            loading ? '…' : perLocale.length,
+                            ")"
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("p", {
+                        style: {
+                            margin: '0 0 0.5rem',
+                            fontSize: '0.75rem',
+                            color: 'var(--theme-elevation-500)'
+                        },
+                        children: "Counts here are per locale-row (one row per target locale on a run). A run covering 2 locales contributes 2 rows; that's why locale-failed totals can exceed the doc-level “failed” count above."
+                    }),
+                    loading ? /*#__PURE__*/ _jsx(SkeletonLines, {}) : perLocale.length === 0 ? /*#__PURE__*/ _jsx("p", {
+                        style: {
+                            margin: 0,
+                            fontSize: '0.85rem',
+                            color: 'var(--theme-elevation-500)'
+                        },
+                        children: "No locale activity in this range."
+                    }) : /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            overflowX: 'auto'
+                        },
+                        children: /*#__PURE__*/ _jsxs("table", {
+                            style: {
+                                width: '100%',
+                                borderCollapse: 'collapse',
+                                fontSize: '0.85rem'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx("thead", {
+                                    children: /*#__PURE__*/ _jsxs("tr", {
+                                        children: [
+                                            /*#__PURE__*/ _jsxs("th", {
+                                                "aria-sort": ariaSortFor(localeSort.col, 'locale', localeSort.dir),
+                                                onClick: ()=>setLocaleSort((s)=>({
+                                                            col: 'locale',
+                                                            dir: nextDir(s.col, 'locale', s.dir)
+                                                        })),
+                                                style: SORTABLE_TH_STYLE,
+                                                children: [
+                                                    "Locale",
+                                                    sortIndicator(localeSort.col, 'locale', localeSort.dir)
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("th", {
+                                                "aria-sort": ariaSortFor(localeSort.col, 'runs', localeSort.dir),
+                                                onClick: ()=>setLocaleSort((s)=>({
+                                                            col: 'runs',
+                                                            dir: nextDir(s.col, 'runs', s.dir)
+                                                        })),
+                                                style: {
+                                                    ...SORTABLE_TH_STYLE,
+                                                    textAlign: 'right'
+                                                },
+                                                children: [
+                                                    "Runs",
+                                                    sortIndicator(localeSort.col, 'runs', localeSort.dir)
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("th", {
+                                                "aria-sort": ariaSortFor(localeSort.col, 'failed', localeSort.dir),
+                                                onClick: ()=>setLocaleSort((s)=>({
+                                                            col: 'failed',
+                                                            dir: nextDir(s.col, 'failed', s.dir)
+                                                        })),
+                                                style: {
+                                                    ...SORTABLE_TH_STYLE,
+                                                    textAlign: 'right'
+                                                },
+                                                children: [
+                                                    "Failed",
+                                                    sortIndicator(localeSort.col, 'failed', localeSort.dir)
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsxs("th", {
+                                                "aria-sort": ariaSortFor(localeSort.col, 'successRate', localeSort.dir),
+                                                onClick: ()=>setLocaleSort((s)=>({
+                                                            col: 'successRate',
+                                                            dir: nextDir(s.col, 'successRate', s.dir)
+                                                        })),
+                                                style: {
+                                                    ...SORTABLE_TH_STYLE,
+                                                    textAlign: 'right'
+                                                },
+                                                children: [
+                                                    "Success rate",
+                                                    sortIndicator(localeSort.col, 'successRate', localeSort.dir)
+                                                ]
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx("tbody", {
+                                    children: perLocale.map((b)=>/*#__PURE__*/ _jsxs("tr", {
+                                            children: [
+                                                /*#__PURE__*/ _jsx("td", {
+                                                    style: {
+                                                        ...TD_STYLE,
+                                                        fontFamily: 'monospace'
+                                                    },
+                                                    children: b.locale
+                                                }),
+                                                /*#__PURE__*/ _jsx("td", {
+                                                    style: {
+                                                        ...TD_STYLE,
+                                                        textAlign: 'right'
+                                                    },
+                                                    children: fmtNum(b.runs)
+                                                }),
+                                                /*#__PURE__*/ _jsx("td", {
+                                                    style: {
+                                                        ...TD_STYLE,
+                                                        textAlign: 'right',
+                                                        color: b.failed > 0 ? 'var(--theme-error-500)' : 'var(--theme-elevation-700)'
+                                                    },
+                                                    children: b.failed
+                                                }),
+                                                /*#__PURE__*/ _jsxs("td", {
+                                                    style: {
+                                                        ...TD_STYLE,
+                                                        textAlign: 'right'
+                                                    },
+                                                    children: [
+                                                        b.successRate.toFixed(1),
+                                                        "%"
+                                                    ]
+                                                })
+                                            ]
+                                        }, b.locale))
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("section", {
+                style: {
+                    ...SECTION_STYLE,
+                    minHeight: SECTION_MIN_HEIGHT
+                },
+                children: [
+                    /*#__PURE__*/ _jsxs("h3", {
+                        style: {
+                            margin: '0 0 0.5rem',
+                            fontSize: '0.95rem',
+                            color: 'var(--theme-elevation-1000)'
+                        },
+                        children: [
+                            "Recent failures (",
+                            loading ? '…' : recentFailures.length,
+                            ")"
+                        ]
+                    }),
+                    loading ? /*#__PURE__*/ _jsx(SkeletonLines, {}) : recentFailures.length === 0 ? /*#__PURE__*/ _jsx("p", {
+                        style: {
+                            margin: 0,
+                            fontSize: '0.85rem',
+                            color: 'var(--theme-elevation-500)'
+                        },
+                        children: "No failures in this range. Nice."
+                    }) : /*#__PURE__*/ _jsx("div", {
+                        style: {
+                            overflowX: 'auto'
+                        },
+                        children: /*#__PURE__*/ _jsxs("table", {
+                            style: {
+                                width: '100%',
+                                borderCollapse: 'collapse',
+                                fontSize: '0.85rem'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx("thead", {
+                                    children: /*#__PURE__*/ _jsxs("tr", {
+                                        children: [
+                                            /*#__PURE__*/ _jsx("th", {
+                                                style: TH_STYLE,
+                                                children: "Doc"
+                                            }),
+                                            /*#__PURE__*/ _jsx("th", {
+                                                style: TH_STYLE,
+                                                children: "Model"
+                                            }),
+                                            /*#__PURE__*/ _jsx("th", {
+                                                style: TH_STYLE,
+                                                children: "Error"
+                                            }),
+                                            /*#__PURE__*/ _jsx("th", {
+                                                style: {
+                                                    ...TH_STYLE,
+                                                    textAlign: 'right'
+                                                },
+                                                children: "When"
+                                            })
+                                        ]
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx("tbody", {
+                                    children: recentFailures.map((r)=>{
+                                        const failedLocale = failedLocaleFor(r);
+                                        const href = docHref(basePath, r, failedLocale);
+                                        return /*#__PURE__*/ _jsxs("tr", {
+                                            children: [
+                                                /*#__PURE__*/ _jsx("td", {
+                                                    style: TD_STYLE,
+                                                    children: href ? /*#__PURE__*/ _jsxs("a", {
+                                                        href: href,
+                                                        rel: "noopener noreferrer",
+                                                        style: {
+                                                            color: 'var(--theme-success-500)',
+                                                            textDecoration: 'none'
+                                                        },
+                                                        target: "_blank",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx("code", {
+                                                                children: r.slug
+                                                            }),
+                                                            r.documentId && r.kind === 'collection' && /*#__PURE__*/ _jsxs("span", {
+                                                                style: {
+                                                                    color: 'var(--theme-elevation-500)'
+                                                                },
+                                                                children: [
+                                                                    ' ',
+                                                                    "#",
+                                                                    r.documentId
+                                                                ]
+                                                            })
+                                                        ]
+                                                    }) : /*#__PURE__*/ _jsx("code", {
+                                                        children: r.slug
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ _jsx("td", {
+                                                    style: {
+                                                        ...TD_STYLE,
+                                                        fontFamily: 'monospace',
+                                                        fontSize: '0.75rem',
+                                                        color: 'var(--theme-elevation-700)'
+                                                    },
+                                                    children: /*#__PURE__*/ _jsx(ModelCell, {
+                                                        model: r.model
+                                                    })
+                                                }),
+                                                /*#__PURE__*/ _jsx("td", {
+                                                    style: {
+                                                        ...TD_STYLE,
+                                                        color: 'var(--theme-error-500)',
+                                                        fontSize: '0.75rem',
+                                                        maxWidth: '400px',
+                                                        overflow: 'hidden',
+                                                        textOverflow: 'ellipsis',
+                                                        whiteSpace: 'nowrap'
+                                                    },
+                                                    title: r.error ?? undefined,
+                                                    children: r.error ?? '—'
+                                                }),
+                                                /*#__PURE__*/ _jsx("td", {
+                                                    style: {
+                                                        ...TD_STYLE,
+                                                        textAlign: 'right',
+                                                        color: 'var(--theme-elevation-500)',
+                                                        whiteSpace: 'nowrap'
+                                                    },
+                                                    children: relTime(r.createdAt)
+                                                })
+                                            ]
+                                        }, r.id);
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+export default AuditPanel;