@proofhound/web-ui 0.1.6

package/dist/screens/releases/release-line-detail-page.js

@@ -0,0 +1,973 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import Link from 'next/link';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { useQueryClient } from '@tanstack/react-query';
+import { Activity, AlertTriangle, ClipboardCheck, CircleDollarSign, Copy, Gauge, Plus, Square, Timer, } from 'lucide-react';
+import { CartesianGrid, Line, LineChart as RechartsLineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, } from 'recharts';
+import { Main } from '@proofhound/ui/layout';
+import { Button, DateRangeSegmented, resolveDateRangePreset, resolveRollingDateRangeValue, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, Input, PlatformLoader, DetailPageSkeleton, ResourcePaginationFooter, Table, TableBody, TableCell, TableEmpty, TableHead, TableHeader, TableRow, cn, } from '@proofhound/ui';
+import { useAnnotationTaskList } from '../../hooks';
+import { useDelayedLoading } from '../../hooks';
+import { useProjectModels } from '../../hooks';
+import { useProductionReleaseHistory, useStopProductionRelease } from '../../hooks';
+import { useProjectMonitoringStats, useProjectMonitoringTimeseries } from '../../hooks';
+import { useReleaseLineEvents, useReleaseLineList, useUpdateReleaseLineRunConfig, useUpdateReleaseLineTrafficRatio, } from '../../hooks';
+import { useReleaseRunResults } from '../../hooks';
+import { AUTO_REFRESH_INTERVAL_MS, useAutoRefresh, useDateTimeFormatter } from '../../hooks';
+import { useI18n } from '../../i18n';
+import { getReleaseLineId, getReleaseStopConfirmationName } from '../../lib';
+import { BigChartCard } from '../monitoring/big-chart-card';
+import { ReleaseEventPill, ReleaseMetricCard, formatCount, formatPercent, } from './release-line-ui';
+import { ReleaseTopologyCanvas } from './release-topology-canvas';
+const DETAIL_TABS = [
+    { value: 'monitoring', key: 'releases.detail.tab.monitoring' },
+    { value: 'variants', key: 'releases.detail.tab.variants' },
+    { value: 'results', key: 'releases.detail.tab.results' },
+    { value: 'quality', key: 'releases.detail.tab.quality' },
+    { value: 'history', key: 'releases.detail.tab.history' },
+];
+const RESULT_COLUMNS = [
+    { key: 'externalId', width: 'normal' },
+    { key: 'input', width: 'wide' },
+    { key: 'output', width: 'wide' },
+    { key: 'source', width: 'compact' },
+    { key: 'variant', width: 'normal' },
+    { key: 'latency', width: 'compact' },
+    { key: 'tokens', width: 'compact' },
+    { key: 'createdAt', width: 'normal' },
+];
+const RESULT_PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+const EMPTY_BY_SOURCE = { prod: 0, canary: 0, iter: 0, exp: 0 };
+const EMPTY_TIMESERIES_POINTS = [];
+const RELEASE_MONITORING_SOURCE_KEYS = ['prod', 'canary'];
+function useDateTimeOrDash() {
+    const { formatDateTime } = useDateTimeFormatter();
+    return useCallback((value) => (value ? formatDateTime(value, { fallback: '—' }) : '—'), [formatDateTime]);
+}
+const COMPACT_METRIC_DOT_CLASS = {
+    default: 'bg-muted-foreground',
+    production: 'bg-[var(--src-prod-fg)]',
+    canary: 'bg-[var(--src-canary-fg)]',
+    success: 'bg-[var(--status-running-fg)]',
+    danger: 'bg-destructive',
+};
+const QUALITY_LINE_COLORS = {
+    score: 'var(--src-canary)',
+};
+function normalizeLineId(value) {
+    try {
+        return decodeURIComponent(value);
+    }
+    catch {
+        return value;
+    }
+}
+function resolveTab(value) {
+    if (value === 'annotation')
+        return 'quality';
+    if (value === 'monitoring' ||
+        value === 'variants' ||
+        value === 'results' ||
+        value === 'quality' ||
+        value === 'history') {
+        return value;
+    }
+    return 'monitoring';
+}
+function createDefaultMonitoringRange() {
+    const preset = resolveDateRangePreset('h1');
+    if (preset)
+        return { preset: 'h1', ...preset };
+    const now = new Date();
+    return {
+        preset: 'h1',
+        from: new Date(now.getTime() - 60 * 60_000).toISOString(),
+        to: now.toISOString(),
+    };
+}
+function getMonitoringRefreshInterval(preset) {
+    if (preset === 'h1')
+        return AUTO_REFRESH_INTERVAL_MS;
+    if (preset === 'h24')
+        return 30_000;
+    if (preset === 'd7')
+        return 60_000;
+    return false;
+}
+function hasRunningRelease(line) {
+    return line?.production?.currentEvent?.status === 'running' || line?.canary?.status === 'running';
+}
+function formatBigNumber(value) {
+    if (!Number.isFinite(value))
+        return '0';
+    const abs = Math.abs(value);
+    if (abs >= 1_000_000_000)
+        return `${(value / 1_000_000_000).toFixed(2)}B`;
+    if (abs >= 1_000_000)
+        return `${(value / 1_000_000).toFixed(2)}M`;
+    if (abs >= 1_000)
+        return `${(value / 1_000).toFixed(1)}k`;
+    return Math.round(value).toString();
+}
+function formatRateValue(value) {
+    if (!Number.isFinite(value) || value <= 0)
+        return '0';
+    if (value >= 1000)
+        return `${(value / 1000).toFixed(1)}k`;
+    return value.toFixed(0);
+}
+function formatPercentValue(value) {
+    if (!Number.isFinite(value) || value <= 0)
+        return '0%';
+    return `${value.toFixed(value >= 10 ? 1 : 2)}%`;
+}
+function formatLatencyMs(value) {
+    if (!Number.isFinite(value) || value <= 0)
+        return '—';
+    if (value < 1000)
+        return `${Math.round(value)}ms`;
+    const seconds = value / 1000;
+    return `${seconds >= 10 ? seconds.toFixed(1) : seconds.toFixed(2)}s`;
+}
+function formatCostValue(value) {
+    if (!Number.isFinite(value) || value <= 0)
+        return '$0';
+    if (Math.abs(value) >= 10000)
+        return `$${(value / 1000).toFixed(1)}k`;
+    if (Math.abs(value) >= 1000)
+        return `$${(value / 1000).toFixed(2)}k`;
+    return `$${value.toFixed(4)}`;
+}
+function toPercentPoint(value) {
+    if (!Number.isFinite(value))
+        return 0;
+    return Math.max(0, Math.min(100, value * 100));
+}
+function formatQualityPercent(value, fractionDigits = 1) {
+    if (value === null || value === undefined || !Number.isFinite(value))
+        return '—';
+    return `${value.toFixed(fractionDigits)}%`;
+}
+function timeValue(value) {
+    if (!value)
+        return 0;
+    const parsed = Date.parse(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+}
+function buildAnnotationQualityPoints(tasks) {
+    const points = [];
+    for (const task of tasks) {
+        if (task.quality) {
+            points.push({
+                id: task.id,
+                x: '',
+                name: task.name,
+                promptVersionLabel: task.promptVersionLabel ?? '—',
+                modelName: task.modelName ?? '—',
+                releaseVariantLabel: task.releaseVariantLabel,
+                submitted: task.progress.submitted,
+                total: task.progress.total,
+                matched: task.quality.matched,
+                mismatched: task.quality.mismatched,
+                updatedAt: task.updatedAt,
+                score: toPercentPoint(task.quality.score),
+            });
+        }
+    }
+    return points
+        .sort((left, right) => timeValue(left.updatedAt) - timeValue(right.updatedAt))
+        .map((point, index) => ({ ...point, x: `#${index + 1}` }));
+}
+function comparisonFromDelta(current, previous, formatter, label, unit) {
+    const delta = current - previous;
+    const sign = delta > 0 ? '+' : delta < 0 ? '-' : '';
+    return {
+        value: `${sign}${formatter(Math.abs(delta))}`,
+        unit,
+        label,
+        tone: toneFromDelta(delta),
+    };
+}
+function toneFromDelta(delta) {
+    if (delta > 0)
+        return 'up';
+    if (delta < 0)
+        return 'down';
+    return 'neutral';
+}
+function failureRatePercent(stats, period) {
+    const requestCount = stats?.requests[period] ?? 0;
+    if (requestCount <= 0)
+        return 0;
+    return ((stats?.errors[period] ?? 0) / requestCount) * 100;
+}
+function sourceBucketTotal(values) {
+    return values.prod + values.canary + values.iter + values.exp;
+}
+function maxTimeseriesBucketTotal(points, metric) {
+    return points.reduce((max, point) => Math.max(max, sourceBucketTotal(point[metric])), 0);
+}
+function maxFailureRatePercent(points) {
+    return points.reduce((max, point) => {
+        const requests = sourceBucketTotal(point.requests);
+        if (requests <= 0)
+            return max;
+        const failureRate = (sourceBucketTotal(point.errors) / requests) * 100;
+        return Math.max(max, failureRate);
+    }, 0);
+}
+function pickReleaseTimeseries(points, granularity, metric, formatMonitoringTick) {
+    return points.map((point) => ({
+        x: formatMonitoringTick(point.bucketAt, granularity),
+        prod: point[metric].prod,
+        canary: point[metric].canary,
+        iter: point[metric].iter,
+        exp: point[metric].exp,
+    }));
+}
+function pickReleaseFailureRateTimeseries(points, granularity, formatMonitoringTick) {
+    return points.map((point) => {
+        const requestCount = sourceBucketTotal(point.requests);
+        return {
+            x: formatMonitoringTick(point.bucketAt, granularity),
+            prod: failureRateContributionPercent(point.errors.prod, requestCount),
+            canary: failureRateContributionPercent(point.errors.canary, requestCount),
+            iter: failureRateContributionPercent(point.errors.iter, requestCount),
+            exp: failureRateContributionPercent(point.errors.exp, requestCount),
+        };
+    });
+}
+function failureRateBySourcePercent(stats) {
+    const requestCount = stats?.requests.total ?? 0;
+    if (requestCount <= 0)
+        return EMPTY_BY_SOURCE;
+    return {
+        prod: failureRateContributionPercent(stats?.errors.bySource.prod ?? 0, requestCount),
+        canary: failureRateContributionPercent(stats?.errors.bySource.canary ?? 0, requestCount),
+        iter: failureRateContributionPercent(stats?.errors.bySource.iter ?? 0, requestCount),
+        exp: failureRateContributionPercent(stats?.errors.bySource.exp ?? 0, requestCount),
+    };
+}
+function failureRateContributionPercent(errors, totalRequests) {
+    return totalRequests > 0 ? (errors / totalRequests) * 100 : 0;
+}
+function readMetricNumber(metrics, keys) {
+    if (!metrics || typeof metrics !== 'object' || Array.isArray(metrics))
+        return 0;
+    const record = metrics;
+    for (const key of keys) {
+        const value = record[key];
+        const parsed = typeof value === 'number' ? value : typeof value === 'string' ? Number(value) : NaN;
+        if (Number.isFinite(parsed) && parsed >= 0)
+            return parsed;
+    }
+    return 0;
+}
+function getDownstreamDeliveryStats(line) {
+    const metrics = line.canary?.metrics ?? line.production?.currentEvent?.sourceMetricsSnapshot ?? null;
+    const success = readMetricNumber(metrics, ['downstreamDeliverySuccess', 'outputDeliverySuccess']);
+    const failed = readMetricNumber(metrics, ['downstreamDeliveryFailed', 'outputDeliveryFailed']);
+    const total = success + failed;
+    return {
+        success,
+        failed,
+        failureRate: total > 0 ? failed / total : null,
+    };
+}
+function CompactMetricGroup({ title, items, className, }) {
+    return (_jsxs("div", { className: cn('min-w-0 space-y-3', className), children: [_jsx("div", { className: "text-[13px] font-medium text-muted-foreground", children: title }), _jsx("dl", { className: "grid grid-cols-2 gap-x-5 gap-y-3 sm:grid-cols-3", children: items.map((item) => {
+                    const tone = item.tone ?? 'default';
+                    return (_jsxs("div", { className: "min-w-0", children: [_jsxs("dt", { className: "flex items-center gap-1.5 text-[12px] text-muted-foreground", children: [_jsx("span", { className: cn('size-1.5 shrink-0 rounded-full', COMPACT_METRIC_DOT_CLASS[tone]) }), _jsx("span", { className: "truncate", children: item.label })] }), _jsx("dd", { className: cn('mt-1 truncate text-[20px] font-semibold leading-none text-foreground', tone === 'danger' && 'text-destructive'), children: item.value })] }, item.label));
+                }) })] }));
+}
+export function ReleaseLineDetailPage({ projectId, releaseLineId }) {
+    const router = useRouter();
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const { t } = useI18n();
+    const queryClient = useQueryClient();
+    const listQuery = useReleaseLineList(projectId);
+    const lineId = normalizeLineId(releaseLineId);
+    const line = useMemo(() => listQuery.data.find((item) => item.id === lineId || getReleaseLineId(item.promptId, item.inputConnectorId) === lineId) ?? null, [lineId, listQuery.data]);
+    const historyQuery = useProductionReleaseHistory(projectId, line?.promptId ?? '');
+    const releaseLineEventsQuery = useReleaseLineEvents(projectId, line?.id ?? '');
+    const stopProductionMutation = useStopProductionRelease(projectId);
+    const updateTrafficRatioMutation = useUpdateReleaseLineTrafficRatio(projectId);
+    const updateRunConfigMutation = useUpdateReleaseLineRunConfig(projectId);
+    const modelQuery = useProjectModels(projectId);
+    const tab = resolveTab(searchParams.get('tab'));
+    const selectedReleaseVariantId = searchParams.get('variant') ?? undefined;
+    const [stopDialogOpen, setStopDialogOpen] = useState(false);
+    const [stopConfirmationText, setStopConfirmationText] = useState('');
+    const productionReleaseName = useMemo(() => getReleaseStopConfirmationName(line), [line]);
+    const canConfirmStopProduction = stopConfirmationText === productionReleaseName && productionReleaseName.length > 0;
+    const canAddCanary = Boolean(line && line.production?.currentEvent?.status === 'running' && !line.canary);
+    const isLive = hasRunningRelease(line);
+    const onAutoRefreshTick = useCallback(async () => {
+        await Promise.all([
+            queryClient.invalidateQueries({ queryKey: ['release-lines', projectId] }),
+            queryClient.invalidateQueries({ queryKey: ['production-releases', projectId] }),
+            queryClient.invalidateQueries({ queryKey: ['canary-releases', projectId] }),
+        ]);
+    }, [projectId, queryClient]);
+    useAutoRefresh({
+        intervalMs: AUTO_REFRESH_INTERVAL_MS,
+        enabled: isLive,
+        onTick: onAutoRefreshTick,
+    });
+    useEffect(() => {
+        if (searchParams.get('tab') !== 'annotation')
+            return;
+        const params = new URLSearchParams(searchParams.toString());
+        params.set('tab', 'quality');
+        router.replace(`${pathname}?${params.toString()}`, { scroll: false });
+    }, [pathname, router, searchParams]);
+    const selectTab = useCallback((next) => {
+        const params = new URLSearchParams(searchParams.toString());
+        if (next === 'monitoring')
+            params.delete('tab');
+        else
+            params.set('tab', next);
+        if (next !== 'results')
+            params.delete('variant');
+        const query = params.toString();
+        router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false });
+    }, [pathname, router, searchParams]);
+    const detailLoading = useDelayedLoading(listQuery.isLoading);
+    if (detailLoading) {
+        return (_jsx(Main, { fixed: true, className: "bg-muted/35", children: _jsx("div", { className: "mx-auto w-full max-w-[1760px] px-4 py-6 sm:px-6 lg:px-8", children: _jsx(DetailPageSkeleton, {}) }) }));
+    }
+    if (!line) {
+        return (_jsx(Main, { fixed: true, className: "bg-muted/35", children: _jsx("div", { className: "rounded-lg border bg-card p-10 text-center text-sm text-muted-foreground", children: t('releases.detail.notFound') }) }));
+    }
+    function openStopProductionDialog() {
+        if (!line?.production?.currentEvent)
+            return;
+        setStopConfirmationText('');
+        setStopDialogOpen(true);
+    }
+    function closeStopProductionDialog() {
+        if (stopProductionMutation.isPending)
+            return;
+        setStopDialogOpen(false);
+        setStopConfirmationText('');
+    }
+    function confirmStopProduction() {
+        if (!line?.production?.currentEvent || !canConfirmStopProduction)
+            return;
+        stopProductionMutation.mutate({
+            eventId: line.production.currentEvent.id,
+            body: { reason: t('releases.detail.stopReason') },
+        }, {
+            onSuccess: () => {
+                setStopDialogOpen(false);
+                setStopConfirmationText('');
+            },
+        });
+    }
+    function openAddCanaryPage() {
+        if (!line || !canAddCanary)
+            return;
+        router.push(`/releases/new?mode=canary&line=${encodeURIComponent(line.id)}`);
+    }
+    return (_jsxs(Main, { fixed: true, className: "gap-5 overflow-auto bg-muted/35 pb-8", children: [_jsxs("div", { className: "mx-auto flex w-full max-w-[1760px] flex-col gap-5", "data-testid": "release-line-detail-page", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-4", children: [_jsx("div", { className: "min-w-0", children: _jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [_jsx("h1", { className: "truncate text-[22px] font-semibold leading-tight", children: line.promptName }), _jsx("span", { "data-testid": "release-line-detail-status", className: "sr-only", children: line.production?.currentEvent?.status ?? line.canary?.status ?? line.status })] }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [line.production?.currentEvent?.status === 'running' ? (_jsxs(Button, { variant: "outline", onClick: openStopProductionDialog, disabled: stopProductionMutation.isPending, className: "text-destructive hover:text-destructive", "data-testid": "release-line-detail-stop", children: [_jsx(Square, { className: "size-4" }), t('releases.detail.action.stopProduction')] })) : null, canAddCanary ? (_jsxs(Button, { onClick: openAddCanaryPage, children: [_jsx(Plus, { className: "size-4" }), t('releases.detail.action.addCanary')] })) : null] })] }), _jsx(ReleaseTopologyCanvas, { line: line, models: modelQuery.data?.data ?? [], modelsLoading: modelQuery.isLoading, onUpdateTrafficRatio: (_canary, trafficRatio) => updateTrafficRatioMutation.mutateAsync({
+                            releaseLineId: line.id,
+                            body: { trafficRatio },
+                        }), trafficRatioPending: updateTrafficRatioMutation.isPending, onUpdateRunConfig: (body) => updateRunConfigMutation.mutateAsync({
+                            releaseLineId: line.id,
+                            body,
+                        }), runConfigPending: updateRunConfigMutation.isPending, onAddCanary: canAddCanary ? openAddCanaryPage : undefined }), _jsx("div", { className: "inline-flex w-fit flex-wrap gap-0.5 rounded-lg border bg-card p-1", children: DETAIL_TABS.map((item) => (_jsx("button", { type: "button", onClick: () => selectTab(item.value), className: cn('rounded-md px-3.5 py-1.5 text-[13px] font-medium transition-colors', tab === item.value
+                                ? 'bg-muted font-semibold text-foreground'
+                                : 'text-muted-foreground hover:text-foreground'), children: t(item.key) }, item.value))) }), tab === 'monitoring' ? (_jsx(MonitoringPane, { projectId: projectId, line: line, releaseEvents: releaseLineEventsQuery.data?.data ?? [] })) : null, tab === 'variants' ? (_jsx(VariantsPane, { line: line, releaseEvents: releaseLineEventsQuery.data?.data ?? [], loading: releaseLineEventsQuery.isLoading })) : null, tab === 'results' ? (_jsx(ResultsPane, { projectId: projectId, line: line, releaseEvents: releaseLineEventsQuery.data?.data ?? [], initialReleaseVariantId: selectedReleaseVariantId })) : null, tab === 'quality' ? _jsx(QualityMetricsPane, { projectId: projectId, line: line }) : null, tab === 'history' ? (_jsx(HistoryPane, { line: line, productionHistory: historyQuery.data?.data ?? [], releaseEvents: releaseLineEventsQuery.data?.data ?? [], loading: historyQuery.isLoading || releaseLineEventsQuery.isLoading })) : null] }), _jsx(Dialog, { open: stopDialogOpen, onOpenChange: (open) => (open ? setStopDialogOpen(true) : closeStopProductionDialog()), children: _jsxs(DialogContent, { "data-testid": "release-stop-production-dialog", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: t('releases.detail.stopDialog.title') }), _jsx(DialogDescription, { children: t('releases.detail.stopDialog.description') })] }), _jsxs("div", { className: "rounded-lg border bg-muted/40 p-3", children: [_jsx("div", { className: "text-[11.5px] font-medium text-muted-foreground", children: t('releases.detail.stopDialog.releaseName') }), _jsx("div", { className: "mt-1 break-all font-mono text-[13px] font-semibold", children: productionReleaseName || '—' })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("label", { htmlFor: "release-stop-production-name", className: "text-[12.5px] font-medium", children: t('releases.detail.stopDialog.inputLabel') }), _jsx(Input, { id: "release-stop-production-name", value: stopConfirmationText, onChange: (event) => setStopConfirmationText(event.target.value), placeholder: t('releases.detail.stopDialog.inputPlaceholder').replace('{name}', productionReleaseName), autoComplete: "off" }), stopConfirmationText.length > 0 && !canConfirmStopProduction ? (_jsx("p", { className: "text-[12px] text-destructive", children: t('releases.detail.stopDialog.mismatch') })) : null] }), _jsxs(DialogFooter, { children: [_jsx(Button, { type: "button", variant: "outline", onClick: closeStopProductionDialog, disabled: stopProductionMutation.isPending, children: t('common.cancel') }), _jsxs(Button, { type: "button", variant: "destructive", onClick: confirmStopProduction, disabled: !canConfirmStopProduction || stopProductionMutation.isPending, children: [_jsx(Square, { className: "size-4" }), stopProductionMutation.isPending
+                                            ? t('releases.detail.stopDialog.stopping')
+                                            : t('releases.detail.stopDialog.confirm')] })] })] }) })] }));
+}
+function MonitoringPane({ projectId, line, releaseEvents, }) {
+    const { t, language } = useI18n();
+    const { formatMonitoringTick } = useDateTimeFormatter();
+    const queryClient = useQueryClient();
+    const [dateRange, setDateRange] = useState(() => createDefaultMonitoringRange());
+    const sourceIds = useMemo(() => getReleaseLineEventSourceIds(line, releaseEvents), [line, releaseEvents]);
+    const sources = useMemo(() => getReleaseLineEventSources(line, releaseEvents), [line, releaseEvents]);
+    const filter = useMemo(() => ({
+        from: dateRange.from,
+        to: dateRange.to,
+        sourceIds: sourceIds.length > 0 ? sourceIds : undefined,
+        sources,
+        granularity: 'auto',
+    }), [dateRange.from, dateRange.to, sourceIds, sources]);
+    const statsQuery = useProjectMonitoringStats(projectId, filter, sourceIds.length > 0);
+    const timeseriesQuery = useProjectMonitoringTimeseries(projectId, filter, sourceIds.length > 0);
+    const monitoringRefreshInterval = getMonitoringRefreshInterval(dateRange.preset);
+    const refreshMonitoring = useCallback(async () => {
+        const nextDateRange = resolveRollingDateRangeValue(dateRange);
+        if (nextDateRange.preset !== dateRange.preset ||
+            nextDateRange.from !== dateRange.from ||
+            nextDateRange.to !== dateRange.to) {
+            setDateRange(nextDateRange);
+            return;
+        }
+        await queryClient.invalidateQueries({ queryKey: ['project-monitoring', projectId] });
+    }, [dateRange, projectId, queryClient]);
+    useAutoRefresh({
+        intervalMs: monitoringRefreshInterval,
+        enabled: hasRunningRelease(line) && sourceIds.length > 0 && monitoringRefreshInterval !== false,
+        onTick: refreshMonitoring,
+    });
+    const stats = statsQuery.data;
+    const timeseriesPoints = timeseriesQuery.data?.points ?? EMPTY_TIMESERIES_POINTS;
+    const timeseriesGranularity = timeseriesQuery.data?.granularity ?? 'hour';
+    const processed = Math.trunc(stats?.requests.total ?? 0);
+    const filtered = line.canary?.totalFiltered ?? 0;
+    const failed = Math.trunc(stats?.errors.total ?? 0);
+    const total = processed + filtered;
+    const downstreamDelivery = getDownstreamDeliveryStats(line);
+    const vsPreviousPeriodLabel = t('monitoring.delta.vsPreviousPeriod');
+    const sourceLabels = useMemo(() => ({
+        prod: t('monitoring.source.prod'),
+        canary: t('monitoring.source.canary'),
+        iter: t('monitoring.source.iter'),
+        exp: t('monitoring.source.exp'),
+    }), [t]);
+    const chartLabels = useMemo(() => ({
+        sourceDistributionLabel: t('monitoring.chart.sourceDistribution'),
+        totalLabel: t('monitoring.chart.total'),
+        failureRateTotalLabel: t('monitoring.chart.failureRateTotal'),
+    }), [t]);
+    const timeseriesMax = useMemo(() => ({
+        rpm: maxTimeseriesBucketTotal(timeseriesPoints, 'rpm'),
+        tpm: maxTimeseriesBucketTotal(timeseriesPoints, 'tpm'),
+        latencyAverageMs: maxTimeseriesBucketTotal(timeseriesPoints, 'latencyAverageMs'),
+        latencyP50Ms: maxTimeseriesBucketTotal(timeseriesPoints, 'latencyP50Ms'),
+        latencyP95Ms: maxTimeseriesBucketTotal(timeseriesPoints, 'latencyP95Ms'),
+        latencyP99Ms: maxTimeseriesBucketTotal(timeseriesPoints, 'latencyP99Ms'),
+        cost: maxTimeseriesBucketTotal(timeseriesPoints, 'cost'),
+        failureRatePercent: maxFailureRatePercent(timeseriesPoints),
+    }), [timeseriesPoints]);
+    function pickTimeseries(metric) {
+        return pickReleaseTimeseries(timeseriesPoints, timeseriesGranularity, metric, formatMonitoringTick);
+    }
+    function pickFailureRateTimeseries() {
+        return pickReleaseFailureRateTimeseries(timeseriesPoints, timeseriesGranularity, formatMonitoringTick);
+    }
+    const dateRangePresetLabels = useMemo(() => [
+        { value: 'h1', label: t('monitoring.timeRange.preset.h1') },
+        { value: 'h24', label: t('monitoring.timeRange.preset.h24') },
+        { value: 'd7', label: t('monitoring.timeRange.preset.d7') },
+        { value: 'd30', label: t('monitoring.timeRange.preset.d30') },
+        { value: 'custom', label: t('monitoring.timeRange.preset.custom') },
+    ], [t]);
+    const dateRangeLabels = useMemo(() => ({
+        ariaLabel: t('monitoring.timeRange.ariaLabel'),
+        customRangeAriaLabel: t('monitoring.timeRange.customRangeAriaLabel'),
+        fromLabel: t('monitoring.timeRange.from'),
+        toLabel: t('monitoring.timeRange.to'),
+        dateLabel: t('monitoring.timeRange.date'),
+        timeLabel: t('monitoring.timeRange.time'),
+        previousMonth: t('monitoring.timeRange.previousMonth'),
+        nextMonth: t('monitoring.timeRange.nextMonth'),
+        cancel: t('common.cancel'),
+        apply: t('common.apply'),
+        invalidRange: t('monitoring.timeRange.invalidRange'),
+    }), [t]);
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between", children: [_jsx("h2", { className: "text-[14px] font-semibold", children: t('releases.detail.metric.realtime') }), _jsx("div", { className: "flex flex-wrap items-center gap-2", children: _jsx(DateRangeSegmented, { value: dateRange, onChange: setDateRange, presetLabels: dateRangePresetLabels, labels: dateRangeLabels, locale: language }) })] }), statsQuery.isError || timeseriesQuery.isError ? (_jsx("div", { className: "rounded-lg border bg-card px-4 py-3 text-sm text-destructive", children: t('monitoring.error.title') })) : null, _jsx("div", { className: "rounded-lg border bg-card p-4", children: _jsxs("div", { className: "grid gap-4 lg:grid-cols-[minmax(0,2fr)_minmax(280px,1fr)]", children: [_jsx(CompactMetricGroup, { title: t('releases.detail.metric.runtimeSummary'), items: [
+                                { label: t('releases.detail.metric.total'), value: formatCount(total) },
+                                { label: t('releases.detail.metric.processed'), value: formatCount(processed), tone: 'success' },
+                                { label: t('releases.detail.metric.filtered'), value: formatCount(filtered) },
+                                { label: t('releases.detail.metric.failed'), value: formatCount(failed), tone: 'danger' },
+                                {
+                                    label: t('releases.detail.metric.productionCount'),
+                                    value: formatCount(Math.trunc(stats?.requests.bySource.prod ?? 0)),
+                                    tone: 'production',
+                                },
+                                {
+                                    label: t('releases.detail.metric.canaryCount'),
+                                    value: formatCount(Math.trunc(stats?.requests.bySource.canary ?? 0)),
+                                    tone: 'canary',
+                                },
+                            ] }), _jsx(CompactMetricGroup, { title: t('releases.detail.metric.downstreamDelivery'), className: "border-t pt-4 lg:border-l lg:border-t-0 lg:pl-4 lg:pt-0", items: [
+                                {
+                                    label: t('releases.detail.metric.deliverySuccess'),
+                                    value: formatCount(Math.trunc(downstreamDelivery.success)),
+                                    tone: 'success',
+                                },
+                                {
+                                    label: t('releases.detail.metric.deliveryFailed'),
+                                    value: formatCount(Math.trunc(downstreamDelivery.failed)),
+                                    tone: 'danger',
+                                },
+                                {
+                                    label: t('releases.detail.metric.deliveryFailureRate'),
+                                    value: formatPercent(downstreamDelivery.failureRate),
+                                    tone: downstreamDelivery.failed > 0 ? 'danger' : 'default',
+                                },
+                            ] })] }) }), _jsxs("section", { className: "space-y-3", "aria-label": t('releases.detail.metric.engineering'), children: [_jsx("h3", { className: "text-[14px] font-semibold", children: t('releases.detail.metric.engineering') }), _jsxs("div", { className: "grid grid-cols-1 gap-4 xl:grid-cols-2 2xl:grid-cols-4", children: [_jsx(BigChartCard, { title: t('releases.detail.metric.rpm'), icon: _jsx(Gauge, { className: "size-4", strokeWidth: 2.2 }), iconBg: "var(--status-pending-bg)", iconFg: "var(--status-pending-fg)", total: formatRateValue(timeseriesMax.rpm), comparison: comparisonFromDelta(timeseriesMax.rpm, stats?.rpmPeak.previous ?? 0, formatRateValue, vsPreviousPeriodLabel), subtitle: t('monitoring.delta.rpmSubtitle'), data: pickTimeseries('rpm'), yTickFormatter: formatRateValue, legendFormatter: formatRateValue, bySource: stats?.rpmPeak.bySource ?? EMPTY_BY_SOURCE, sourceLabels: sourceLabels, sourceKeys: RELEASE_MONITORING_SOURCE_KEYS, ...chartLabels }), _jsx(BigChartCard, { title: t('releases.detail.metric.tpm'), icon: _jsx(Activity, { className: "size-4", strokeWidth: 2.2 }), iconBg: "var(--src-iter-soft)", iconFg: "var(--src-iter-fg)", total: formatBigNumber(timeseriesMax.tpm), comparison: comparisonFromDelta(timeseriesMax.tpm, stats?.tpmPeak.previous ?? 0, formatBigNumber, vsPreviousPeriodLabel), subtitle: t('monitoring.delta.tpmSubtitle'), data: pickTimeseries('tpm'), yTickFormatter: formatBigNumber, legendFormatter: formatBigNumber, bySource: stats?.tpmPeak.bySource ?? EMPTY_BY_SOURCE, sourceLabels: sourceLabels, sourceKeys: RELEASE_MONITORING_SOURCE_KEYS, ...chartLabels }), _jsx(BigChartCard, { title: t('releases.detail.metric.averageLatency'), icon: _jsx(Timer, { className: "size-4", strokeWidth: 2.2 }), iconBg: "var(--src-canary-soft)", iconFg: "var(--src-canary-fg)", total: formatLatencyMs(timeseriesMax.latencyAverageMs), comparison: comparisonFromDelta(timeseriesMax.latencyAverageMs, stats?.latencyAverageMs.previous ?? 0, formatLatencyMs, vsPreviousPeriodLabel), data: pickTimeseries('latencyAverageMs'), yTickFormatter: formatLatencyMs, legendFormatter: formatLatencyMs, bySource: stats?.latencyAverageMs.bySource ?? EMPTY_BY_SOURCE, sourceLabels: sourceLabels, sourceKeys: RELEASE_MONITORING_SOURCE_KEYS, ...chartLabels }), _jsx(BigChartCard, { title: t('releases.detail.metric.p50Latency'), icon: _jsx(Timer, { className: "size-4", strokeWidth: 2.2 }), iconBg: "var(--src-prod-soft)", iconFg: "var(--src-prod-fg)", total: formatLatencyMs(timeseriesMax.latencyP50Ms), comparison: comparisonFromDelta(timeseriesMax.latencyP50Ms, stats?.latencyP50Ms.previous ?? 0, formatLatencyMs, vsPreviousPeriodLabel), data: pickTimeseries('latencyP50Ms'), yTickFormatter: formatLatencyMs, legendFormatter: formatLatencyMs, bySource: stats?.latencyP50Ms.bySource ?? EMPTY_BY_SOURCE, sourceLabels: sourceLabels, sourceKeys: RELEASE_MONITORING_SOURCE_KEYS, ...chartLabels }), _jsx(BigChartCard, { title: t('releases.detail.metric.p95Latency'), icon: _jsx(Timer, { className: "size-4", strokeWidth: 2.2 }), iconBg: "var(--status-running-bg)", iconFg: "var(--status-running-fg)", total: formatLatencyMs(timeseriesMax.latencyP95Ms), comparison: comparisonFromDelta(timeseriesMax.latencyP95Ms, stats?.latencyP95Ms.previous ?? 0, formatLatencyMs, vsPreviousPeriodLabel), data: pickTimeseries('latencyP95Ms'), yTickFormatter: formatLatencyMs, legendFormatter: formatLatencyMs, bySource: stats?.latencyP95Ms.bySource ?? EMPTY_BY_SOURCE, sourceLabels: sourceLabels, sourceKeys: RELEASE_MONITORING_SOURCE_KEYS, ...chartLabels }), _jsx(BigChartCard, { title: t('releases.detail.metric.p99Latency'), icon: _jsx(Timer, { className: "size-4", strokeWidth: 2.2 }), iconBg: "var(--status-pending-bg)", iconFg: "var(--status-pending-fg)", total: formatLatencyMs(timeseriesMax.latencyP99Ms), comparison: comparisonFromDelta(timeseriesMax.latencyP99Ms, stats?.latencyP99Ms.previous ?? 0, formatLatencyMs, vsPreviousPeriodLabel), data: pickTimeseries('latencyP99Ms'), yTickFormatter: formatLatencyMs, legendFormatter: formatLatencyMs, bySource: stats?.latencyP99Ms.bySource ?? EMPTY_BY_SOURCE, sourceLabels: sourceLabels, sourceKeys: RELEASE_MONITORING_SOURCE_KEYS, ...chartLabels }), _jsx(BigChartCard, { title: t('releases.detail.metric.cost'), icon: _jsx(CircleDollarSign, { className: "size-4", strokeWidth: 2.2 }), iconBg: "var(--status-running-bg)", iconFg: "var(--status-running-fg)", total: formatCostValue(timeseriesMax.cost), comparison: comparisonFromDelta(timeseriesMax.cost, stats?.cost.previous ?? 0, formatCostValue, vsPreviousPeriodLabel), subtitle: t('monitoring.delta.costSubtitle'), data: pickTimeseries('cost'), yTickFormatter: formatCostValue, legendFormatter: formatCostValue, bySource: stats?.cost.bySource ?? EMPTY_BY_SOURCE, sourceLabels: sourceLabels, sourceKeys: RELEASE_MONITORING_SOURCE_KEYS, ...chartLabels }), _jsx(BigChartCard, { title: t('releases.detail.metric.failureRate'), icon: _jsx(AlertTriangle, { className: "size-4", strokeWidth: 2.2 }), iconBg: "var(--status-pending-bg)", iconFg: "var(--status-pending-fg)", total: timeseriesMax.failureRatePercent.toFixed(2), unit: "%", comparison: comparisonFromDelta(timeseriesMax.failureRatePercent, failureRatePercent(stats, 'previous'), (value) => value.toFixed(2), vsPreviousPeriodLabel, '%'), subtitle: t('monitoring.delta.failureRateSubtitle'), data: pickFailureRateTimeseries(), yTickFormatter: formatPercentValue, legendFormatter: formatPercentValue, bySource: failureRateBySourcePercent(stats), sourceLabels: sourceLabels, sourceKeys: RELEASE_MONITORING_SOURCE_KEYS, sourceDistributionLabel: chartLabels.sourceDistributionLabel, totalLabel: chartLabels.failureRateTotalLabel })] })] })] }));
+}
+function VariantsPane({ line, releaseEvents, loading, }) {
+    const { t } = useI18n();
+    const formatDateTimeOrDash = useDateTimeOrDash();
+    const details = useMemo(() => buildReleaseVariantDetails(line, releaseEvents), [line, releaseEvents]);
+    const showLoader = useDelayedLoading(loading);
+    if (loading && details.length === 0) {
+        return showLoader ? _jsx(PlatformLoader, { className: "py-8", size: "sm" }) : null;
+    }
+    if (details.length === 0) {
+        return (_jsx("div", { className: "rounded-lg border bg-card p-10 text-center text-sm text-muted-foreground", children: t('releases.detail.variants.empty') }));
+    }
+    return (_jsx("section", { className: "space-y-3", "data-testid": "release-variants-pane", children: _jsx("div", { className: "grid grid-cols-1 gap-3 xl:grid-cols-2", children: details.map((detail) => (_jsxs("article", { className: "rounded-lg border bg-card p-4", children: [_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "min-w-0", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("span", { className: "font-mono text-[17px] font-semibold", children: detail.label }), _jsx(ReleaseVariantStageBadge, { stage: detail.stage })] }), _jsxs("div", { className: "mt-1 max-w-full truncate text-[12px] text-muted-foreground", children: [detail.promptName, " \u00B7 ", detail.promptVersionLabel ?? formatShortId(detail.promptVersionId), " \u00B7", ' ', detail.modelName ?? formatShortId(detail.modelId)] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => void navigator.clipboard?.writeText(detail.id), children: [_jsx(Copy, { className: "size-3.5" }), t('releases.detail.variants.copyId')] }), _jsx(Button, { type: "button", variant: "outline", size: "sm", asChild: true, children: _jsxs(Link, { href: `/releases/${encodeURIComponent(line.id)}?tab=results&variant=${encodeURIComponent(detail.id)}`, children: [_jsx(Activity, { className: "size-3.5" }), t('releases.detail.variants.viewResults')] }) }), _jsx(Button, { type: "button", size: "sm", asChild: true, children: _jsxs(Link, { href: `/annotations/new?line=${encodeURIComponent(line.id)}&variant=${encodeURIComponent(detail.id)}`, children: [_jsx(ClipboardCheck, { className: "size-3.5" }), t('releases.detail.variants.newAnnotation')] }) })] })] }), _jsxs("dl", { className: "mt-4 grid grid-cols-2 gap-3 border-t pt-4 md:grid-cols-4", children: [_jsx(VariantMeta, { label: t('releases.detail.variants.promptVersion'), value: detail.promptVersionLabel ?? formatShortId(detail.promptVersionId) }), _jsx(VariantMeta, { label: t('releases.detail.variants.model'), value: detail.modelName ?? formatShortId(detail.modelId) }), _jsx(VariantMeta, { label: t('releases.detail.variants.provider'), value: detail.modelProvider ?? '—' }), _jsx(VariantMeta, { label: t('releases.detail.variants.updatedAt'), value: formatDateTimeOrDash(detail.updatedAt) }), _jsx(VariantMeta, { label: t('releases.detail.variants.productionEvents'), value: formatCount(detail.productionEventCount) }), _jsx(VariantMeta, { label: t('releases.detail.variants.canaryEvents'), value: formatCount(detail.canaryEventCount) }), _jsx(VariantMeta, { label: t('releases.detail.variants.processed'), value: formatCount(detail.totalProcessed) }), _jsx(VariantMeta, { label: t('releases.detail.variants.errors'), value: formatCount(detail.totalErrors) })] }), _jsxs("div", { className: "mt-4 border-t pt-4", children: [_jsx("div", { className: "mb-2 text-[12px] font-medium text-muted-foreground", children: t('releases.detail.variants.events') }), detail.events.length === 0 ? (_jsx("div", { className: "text-[12px] text-muted-foreground", children: t('releases.detail.variants.noEvents') })) : (_jsx("div", { className: "space-y-2", children: detail.events.slice(0, 5).map((event) => (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2 text-[12px]", children: [_jsx(ReleaseEventPill, { event: event.operation }), _jsx("span", { className: "font-mono text-muted-foreground", children: t(event.laneType === 'production'
+                                                ? 'releases.detail.history.productionLane'
+                                                : 'releases.detail.history.canaryLane') }), _jsx("span", { className: "min-w-0 flex-1 truncate text-muted-foreground", children: event.submitReason || event.status }), _jsx("span", { className: "font-mono text-[11.5px] text-muted-foreground", children: formatDateTimeOrDash(event.createdAt) })] }, event.id))) }))] }), _jsx("div", { className: "mt-4 border-t pt-3", children: _jsx("div", { className: "font-mono text-[11px] text-muted-foreground", children: detail.id }) })] }, detail.id))) }) }));
+}
+function VariantMeta({ label, value }) {
+    return (_jsxs("div", { className: "min-w-0", children: [_jsx("dt", { className: "truncate text-[11.5px] text-muted-foreground", children: label }), _jsx("dd", { className: "mt-1 truncate font-mono text-[12.5px] font-medium text-foreground", children: value })] }));
+}
+function ReleaseVariantStageBadge({ stage }) {
+    const { t } = useI18n();
+    const isProduction = stage === 'production' || stage === 'production_canary';
+    const isCanary = stage === 'canary' || stage === 'production_canary';
+    return (_jsx("span", { className: "inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-medium", style: {
+            background: isProduction ? 'var(--src-prod-soft)' : isCanary ? 'var(--src-canary-soft)' : 'var(--muted)',
+            color: isProduction ? 'var(--src-prod-fg)' : isCanary ? 'var(--src-canary-fg)' : 'var(--muted-foreground)',
+            borderColor: isProduction
+                ? 'color-mix(in srgb, var(--src-prod) 30%, transparent)'
+                : isCanary
+                    ? 'color-mix(in srgb, var(--src-canary) 30%, transparent)'
+                    : 'var(--border)',
+        }, children: t(`releases.detail.variants.stage.${stage}`) }));
+}
+function ResultsPane({ projectId, line, releaseEvents, initialReleaseVariantId, }) {
+    const { t } = useI18n();
+    const formatDateTimeOrDash = useDateTimeOrDash();
+    const [sourceFilter, setSourceFilter] = useState('all');
+    const [releaseVariantFilter, setReleaseVariantFilter] = useState(initialReleaseVariantId ?? 'all');
+    const [promptVersionFilter, setPromptVersionFilter] = useState('all');
+    const [pageIndex, setPageIndex] = useState(0);
+    const [pageSize, setPageSize] = useState(20);
+    const sourceIds = useMemo(() => getReleaseResultSourceIds(line, releaseEvents), [line, releaseEvents]);
+    const releaseVariantOptions = useMemo(() => getReleaseResultVariantOptions(line, releaseEvents), [line, releaseEvents]);
+    const promptVersionOptions = useMemo(() => getReleaseResultPromptVersionOptions(line, releaseEvents), [line, releaseEvents]);
+    const activeReleaseVariantFilter = releaseVariantFilter === 'all' || releaseVariantOptions.some((option) => option.id === releaseVariantFilter)
+        ? releaseVariantFilter
+        : 'all';
+    const activePromptVersionFilter = promptVersionFilter === 'all' || promptVersionOptions.some((option) => option.id === promptVersionFilter)
+        ? promptVersionFilter
+        : 'all';
+    const laneFilter = sourceFilter === 'all' ? undefined : [sourceFilter];
+    const releaseVariantIds = activeReleaseVariantFilter === 'all' ? undefined : [activeReleaseVariantFilter];
+    const promptVersionIds = activePromptVersionFilter === 'all' ? undefined : [activePromptVersionFilter];
+    const resultsQuery = useReleaseRunResults(projectId, {
+        page: pageIndex + 1,
+        pageSize,
+        sort: 'created_desc',
+        status: undefined,
+        judgmentStatus: undefined,
+        isCorrect: undefined,
+        sourceIds,
+        releaseVariantIds,
+        promptVersionIds,
+        lane: laneFilter,
+    }, sourceIds.length > 0);
+    const rows = resultsQuery.data?.data ?? [];
+    const resultsLoading = useDelayedLoading(resultsQuery.isLoading);
+    const total = resultsQuery.data?.total ?? 0;
+    const pageCount = Math.max(1, Math.ceil(total / pageSize));
+    const from = total === 0 ? 0 : pageIndex * pageSize + 1;
+    const to = Math.min((pageIndex + 1) * pageSize, total);
+    return (_jsxs("div", { className: "overflow-hidden rounded-lg border bg-card", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3 border-b px-4 py-3", children: [_jsx("div", { children: _jsx("h2", { className: "text-[14px] font-semibold", children: t('releases.detail.tab.results') }) }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx("label", { className: "sr-only", htmlFor: "release-result-variant-filter", children: t('releases.detail.results.variant') }), _jsxs("select", { id: "release-result-variant-filter", name: "releaseVariantFilter", value: activeReleaseVariantFilter, onChange: (event) => {
+                                    setReleaseVariantFilter(event.currentTarget.value);
+                                    setPageIndex(0);
+                                }, className: "h-9 rounded-md border bg-background px-3 text-[12px] font-medium text-foreground shadow-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", disabled: releaseVariantOptions.length === 0, children: [_jsx("option", { value: "all", children: t('releases.detail.results.variantFilter.all') }), releaseVariantOptions.map((option) => (_jsxs("option", { value: option.id, children: [option.label, " \u00B7 ", option.detail] }, option.id)))] }), _jsx("label", { className: "sr-only", htmlFor: "release-result-prompt-version-filter", children: t('releases.detail.results.promptVersion') }), _jsxs("select", { id: "release-result-prompt-version-filter", name: "promptVersionFilter", value: activePromptVersionFilter, onChange: (event) => {
+                                    setPromptVersionFilter(event.currentTarget.value);
+                                    setPageIndex(0);
+                                }, className: "h-9 rounded-md border bg-background px-3 text-[12px] font-medium text-foreground shadow-sm outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", disabled: promptVersionOptions.length === 0, children: [_jsx("option", { value: "all", children: t('releases.detail.results.promptVersionFilter.all') }), promptVersionOptions.map((option) => (_jsx("option", { value: option.id, children: option.label }, option.id)))] }), _jsx("div", { className: "inline-flex rounded-lg border bg-background p-1", children: ['all', 'production', 'canary'].map((value) => (_jsx("button", { type: "button", onClick: () => {
+                                        setSourceFilter(value);
+                                        setPageIndex(0);
+                                    }, className: cn('h-7 rounded-md px-3 text-[12px] font-medium transition-colors', sourceFilter === value ? 'bg-muted text-foreground' : 'text-muted-foreground hover:text-foreground'), children: t(`releases.detail.results.sourceFilter.${value}`) }, value))) })] })] }), _jsxs(Table, { columns: RESULT_COLUMNS, children: [_jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { column: "externalId", children: t('releases.detail.results.externalId') }), _jsx(TableHead, { column: "input", children: t('releases.detail.results.input') }), _jsx(TableHead, { column: "output", children: t('releases.detail.results.output') }), _jsx(TableHead, { column: "source", children: t('releases.detail.results.source') }), _jsx(TableHead, { column: "variant", children: t('releases.detail.results.variant') }), _jsx(TableHead, { column: "latency", children: t('releases.detail.results.latency') }), _jsx(TableHead, { column: "tokens", children: t('releases.detail.results.tokens') }), _jsx(TableHead, { column: "createdAt", children: t('releases.detail.results.createdAt') })] }) }), _jsxs(TableBody, { children: [resultsLoading && rows.length === 0 ? (_jsx(TableEmpty, { children: _jsx(PlatformLoader, { className: "py-1", size: "sm" }) })) : null, resultsQuery.isError ? _jsx(TableEmpty, { children: t('releases.detail.results.loadFailed') }) : null, !resultsQuery.isLoading && !resultsQuery.isError && rows.length === 0 ? (_jsx(TableEmpty, { children: t('releases.detail.results.empty') })) : null, rows.map((row) => (_jsxs(TableRow, { children: [_jsx(TableCell, { column: "externalId", truncate: true, className: "font-mono text-[11.5px] text-muted-foreground", children: _jsx("span", { title: row.externalId ?? undefined, children: row.externalId ?? '—' }) }), _jsx(TableCell, { column: "input", truncate: 2, className: "text-[12px]", children: _jsx("span", { title: formatReleaseRunResultInput(row, 1000), children: formatReleaseRunResultInput(row, 220) }) }), _jsx(TableCell, { column: "output", truncate: 2, className: "text-[12px]", children: _jsx("span", { title: formatReleaseRunResultOutput(row, 1000), children: formatReleaseRunResultOutput(row, 220) }) }), _jsx(TableCell, { column: "source", children: _jsx(ReleaseRunResultLaneBadge, { lane: row.lane }) }), _jsx(TableCell, { column: "variant", className: "text-[12px]", children: _jsx(ReleaseRunResultVariant, { value: row }) }), _jsx(TableCell, { column: "latency", className: "font-mono text-[11.5px] text-muted-foreground", children: formatResultLatency(row.latencyMs) }), _jsx(TableCell, { column: "tokens", className: "font-mono text-[11.5px] text-muted-foreground", children: formatResultTokens(row) }), _jsx(TableCell, { column: "createdAt", className: "font-mono text-[11.5px] text-muted-foreground", children: formatDateTimeOrDash(row.createdAt) })] }, `${row.id}:${row.createdAt}`)))] })] }), _jsx(ResourcePaginationFooter, { summary: _jsx("span", { children: t('releases.detail.results.summary')
+                        .replace('{from}', String(from))
+                        .replace('{to}', String(to))
+                        .replace('{total}', formatCount(total)) }), pageIndex: pageIndex, pageCount: pageCount, pageSize: pageSize, pageSizeOptions: RESULT_PAGE_SIZE_OPTIONS, previousPageLabel: t('common.previousPage'), nextPageLabel: t('common.nextPage'), onPageChange: setPageIndex, onPageSizeChange: (nextPageSize) => {
+                    setPageSize(nextPageSize);
+                    setPageIndex(0);
+                } })] }));
+}
+function getReleaseLineEventSourceIds(line, releaseEvents) {
+    const ids = [
+        ...releaseEvents.flatMap((event) => [
+            event.id,
+            event.sourceEventId,
+            event.supersedesEventId,
+            event.rollbackTargetEventId,
+        ]),
+        line.production?.currentEvent?.id,
+        line.production?.currentEvent?.sourceCanaryId,
+        line.canary?.id,
+        ...line.canaryHistory.map((canary) => canary.id),
+    ].filter((value) => Boolean(value));
+    return [...new Set(ids)];
+}
+function getReleaseLineEventSources(line, releaseEvents) {
+    const sources = new Set();
+    for (const event of releaseEvents) {
+        if (event.laneType === 'production')
+            sources.add('prod');
+        if (event.laneType === 'canary')
+            sources.add('canary');
+    }
+    if (line.production?.currentEvent)
+        sources.add('prod');
+    if (line.canary)
+        sources.add('canary');
+    if (sources.size === 0) {
+        sources.add('prod');
+        sources.add('canary');
+    }
+    return [...sources];
+}
+function getReleaseResultSourceIds(line, releaseEvents) {
+    return getReleaseLineEventSourceIds(line, releaseEvents);
+}
+function buildReleaseVariantDetails(line, releaseEvents) {
+    const baseById = new Map();
+    const eventsByVariant = new Map();
+    const addVariant = (variant) => {
+        baseById.set(variant.id, {
+            id: variant.id,
+            variantNumber: variant.variantNumber,
+            label: variant.label,
+            promptName: variant.promptName,
+            promptVersionId: variant.promptVersionId,
+            promptVersionLabel: variant.promptVersionLabel,
+            modelId: variant.modelId,
+            modelName: variant.modelName,
+            modelProvider: variant.modelProvider,
+            createdAt: variant.createdAt,
+            updatedAt: variant.updatedAt,
+        });
+    };
+    for (const variant of line.variants)
+        addVariant(variant);
+    for (const event of releaseEvents) {
+        if (!event.releaseVariantId)
+            continue;
+        const events = eventsByVariant.get(event.releaseVariantId) ?? [];
+        events.push(event);
+        eventsByVariant.set(event.releaseVariantId, events);
+        if (!baseById.has(event.releaseVariantId)) {
+            baseById.set(event.releaseVariantId, {
+                id: event.releaseVariantId,
+                variantNumber: event.releaseVariantNumber,
+                label: event.releaseVariantLabel ?? formatShortId(event.releaseVariantId),
+                promptName: event.promptName,
+                promptVersionId: event.promptVersionId,
+                promptVersionLabel: event.promptVersionLabel,
+                modelId: event.modelId,
+                modelName: event.modelName,
+                modelProvider: event.modelProvider,
+                createdAt: event.createdAt,
+                updatedAt: event.updatedAt,
+            });
+        }
+    }
+    const currentProductionVariantId = releaseEvents.find((event) => event.id === line.production?.currentEvent?.id)?.releaseVariantId ?? null;
+    const activeCanaryVariantId = line.canary?.releaseVariantId ??
+        releaseEvents.find((event) => event.id === line.canary?.id)?.releaseVariantId ??
+        null;
+    return [...baseById.values()]
+        .map((base) => {
+        const events = (eventsByVariant.get(base.id) ?? []).sort((left, right) => timeValue(right.createdAt) - timeValue(left.createdAt));
+        return {
+            ...base,
+            createdAt: minDateString([base.createdAt, ...events.map((event) => event.createdAt)]),
+            updatedAt: maxDateString([base.updatedAt, ...events.map((event) => event.updatedAt ?? event.createdAt)]),
+            stage: resolveReleaseVariantStage(base.id, currentProductionVariantId, activeCanaryVariantId, events),
+            events,
+            productionEventCount: events.filter((event) => event.laneType === 'production').length,
+            canaryEventCount: events.filter((event) => event.laneType === 'canary').length,
+            totalProcessed: events.reduce((sum, event) => sum + event.totalProcessed, 0),
+            totalErrors: events.reduce((sum, event) => sum + event.totalErrors, 0),
+        };
+    })
+        .sort((left, right) => {
+        if (left.variantNumber !== null && right.variantNumber !== null)
+            return left.variantNumber - right.variantNumber;
+        if (left.variantNumber !== null)
+            return -1;
+        if (right.variantNumber !== null)
+            return 1;
+        return left.label.localeCompare(right.label, undefined, { numeric: true });
+    });
+}
+function resolveReleaseVariantStage(releaseVariantId, currentProductionVariantId, activeCanaryVariantId, events) {
+    const isProduction = currentProductionVariantId === releaseVariantId ||
+        events.some((event) => event.laneType === 'production' && event.status === 'running');
+    const isCanary = activeCanaryVariantId === releaseVariantId ||
+        events.some((event) => event.laneType === 'canary' && (event.status === 'running' || event.status === 'stopped'));
+    if (isProduction && isCanary)
+        return 'production_canary';
+    if (isProduction)
+        return 'production';
+    if (isCanary)
+        return 'canary';
+    return 'history';
+}
+function minDateString(values) {
+    const dates = values.filter((value) => Boolean(value));
+    if (dates.length === 0)
+        return null;
+    return dates.reduce((min, value) => (timeValue(value) < timeValue(min) ? value : min));
+}
+function maxDateString(values) {
+    const dates = values.filter((value) => Boolean(value));
+    if (dates.length === 0)
+        return null;
+    return dates.reduce((max, value) => (timeValue(value) > timeValue(max) ? value : max));
+}
+function getReleaseResultVariantOptions(line, releaseEvents) {
+    const options = new Map();
+    const add = (input) => {
+        if (!input.id)
+            return;
+        const promptVersion = input.promptVersionLabel?.trim() || formatShortId(input.promptVersionId);
+        const model = input.modelName?.trim() || formatShortId(input.modelId);
+        options.set(input.id, {
+            id: input.id,
+            label: input.label?.trim() || formatShortId(input.id),
+            detail: `${promptVersion} · ${model}`,
+        });
+    };
+    for (const variant of line.variants) {
+        add({
+            id: variant.id,
+            label: variant.label,
+            promptVersionLabel: variant.promptVersionLabel,
+            promptVersionId: variant.promptVersionId,
+            modelName: variant.modelName,
+            modelId: variant.modelId,
+        });
+    }
+    for (const event of releaseEvents) {
+        add({
+            id: event.releaseVariantId,
+            label: event.releaseVariantLabel,
+            promptVersionLabel: event.promptVersionLabel,
+            promptVersionId: event.promptVersionId,
+            modelName: event.modelName,
+            modelId: event.modelId,
+        });
+    }
+    return [...options.values()].sort((left, right) => left.label.localeCompare(right.label, undefined, { numeric: true }));
+}
+function getReleaseResultPromptVersionOptions(line, releaseEvents) {
+    const options = new Map();
+    const add = (id, label) => {
+        if (!id)
+            return;
+        options.set(id, label?.trim() || formatShortId(id));
+    };
+    add(line.production?.currentEvent?.promptVersionId, line.productionVersionLabel);
+    add(line.canary?.promptVersionId, line.canaryVersionLabel);
+    for (const event of releaseEvents) {
+        add(event.promptVersionId, event.promptVersionLabel);
+    }
+    return [...options.entries()].map(([id, label]) => ({ id, label }));
+}
+function formatReleaseRunResultInput(row, maxLength) {
+    return compactReleaseRunResultValue(row.inputVariables, maxLength);
+}
+function formatReleaseRunResultOutput(row, maxLength) {
+    return compactReleaseRunResultValue(row.parsedOutput ?? parseMaybeJson(row.rawResponse) ?? row.rawResponse ?? row.decisionOutput ?? row.errorMessage, maxLength);
+}
+function formatReleaseRunResultPromptVersion(row) {
+    return row.promptVersionNumber ? `v${row.promptVersionNumber}` : formatShortId(row.promptVersionId);
+}
+function compactReleaseRunResultValue(value, maxLength) {
+    const formatted = formatReleaseRunResultValue(value).replace(/\s+/g, ' ').trim();
+    if (formatted.length <= maxLength)
+        return formatted;
+    return `${formatted.slice(0, Math.max(0, maxLength - 1))}…`;
+}
+function formatReleaseRunResultValue(value) {
+    if (value === null || value === undefined)
+        return '—';
+    if (typeof value === 'string')
+        return value.trim() || '—';
+    if (typeof value === 'number' || typeof value === 'boolean')
+        return String(value);
+    if (Array.isArray(value)) {
+        if (value.length === 0)
+            return '—';
+        return value.map(formatReleaseRunResultValue).join(', ');
+    }
+    if (typeof value === 'object') {
+        const entries = Object.entries(value);
+        if (entries.length === 0)
+            return '—';
+        return entries.map(([key, item]) => `${key}: ${formatReleaseRunResultValue(item)}`).join(' · ');
+    }
+    return String(value);
+}
+function parseMaybeJson(value) {
+    if (!value)
+        return null;
+    const trimmed = value.trim();
+    if (!trimmed.startsWith('{') && !trimmed.startsWith('['))
+        return null;
+    try {
+        return JSON.parse(trimmed);
+    }
+    catch {
+        return null;
+    }
+}
+function formatResultLatency(value) {
+    if (value === null || !Number.isFinite(value))
+        return '—';
+    if (value < 1000)
+        return `${Math.round(value)}ms`;
+    const seconds = value / 1000;
+    return `${seconds >= 10 ? seconds.toFixed(1) : seconds.toFixed(2)}s`;
+}
+function formatResultTokens(row) {
+    const input = row.inputTokens ?? 0;
+    const output = row.outputTokens ?? 0;
+    const total = input + output;
+    return total > 0 ? formatCount(total) : '—';
+}
+function formatShortId(value) {
+    return value ? value.slice(0, 8) : '—';
+}
+function ReleaseRunResultLaneBadge({ lane }) {
+    const { t } = useI18n();
+    const isProduction = lane === 'production';
+    return (_jsx("span", { className: "inline-flex items-center rounded-full border px-2 py-0.5 font-mono text-[10.5px] font-semibold leading-4", style: {
+            background: isProduction ? 'var(--src-prod-soft)' : 'var(--src-canary-soft)',
+            color: isProduction ? 'var(--src-prod-fg)' : 'var(--src-canary-fg)',
+            borderColor: isProduction
+                ? 'color-mix(in srgb, var(--src-prod) 30%, transparent)'
+                : 'color-mix(in srgb, var(--src-canary) 30%, transparent)',
+        }, children: t(isProduction ? 'releases.detail.results.lane.production' : 'releases.detail.results.lane.canary') }));
+}
+function ReleaseRunResultVariant({ value }) {
+    const label = value.releaseVariantLabel ?? formatShortId(value.releaseVariantId);
+    const promptVersion = formatReleaseRunResultPromptVersion(value);
+    const model = value.modelName ?? formatShortId(value.modelId);
+    return (_jsxs("div", { className: "min-w-0", children: [_jsx("div", { className: "truncate font-mono text-[11.5px] font-semibold", children: label }), _jsxs("div", { className: "mt-0.5 truncate text-[11.5px] text-muted-foreground", children: [promptVersion, " \u00B7 ", model] })] }));
+}
+function QualityMetricsPane({ projectId, line }) {
+    const { t } = useI18n();
+    const annotationTasksQuery = useAnnotationTaskList(projectId);
+    const annotationTasksLoading = useDelayedLoading(annotationTasksQuery.isLoading);
+    const lineTasks = useMemo(() => (annotationTasksQuery.data?.data ?? []).filter((task) => task.releaseLineId === line.id), [annotationTasksQuery.data, line.id]);
+    const points = useMemo(() => buildAnnotationQualityPoints(lineTasks), [lineTasks]);
+    const latest = points[points.length - 1] ?? null;
+    const submitted = lineTasks.reduce((sum, task) => sum + task.progress.submitted, 0);
+    const matched = lineTasks.reduce((sum, task) => sum + (task.quality?.matched ?? 0), 0);
+    const mismatched = lineTasks.reduce((sum, task) => sum + (task.quality?.mismatched ?? 0), 0);
+    const judged = matched + mismatched;
+    const aggregateScore = judged > 0 ? toPercentPoint(matched / judged) : null;
+    const annotationHref = `/annotations/new?line=${encodeURIComponent(line.id)}`;
+    return (_jsxs("div", { className: "space-y-4", "data-testid": "release-quality-metrics-pane", children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsx("h2", { className: "text-[14px] font-semibold", children: t('releases.detail.quality.title') }), _jsx(Button, { asChild: true, children: _jsxs(Link, { href: annotationHref, children: [_jsx(ClipboardCheck, { className: "size-4" }), t('releases.detail.action.newAnnotation')] }) })] }), annotationTasksLoading && lineTasks.length === 0 ? (_jsx(PlatformLoader, { className: "rounded-lg border bg-card py-10", size: "sm" })) : null, annotationTasksQuery.isError ? (_jsx("div", { className: "rounded-lg border bg-card px-4 py-3 text-sm text-destructive", children: t('releases.detail.quality.loadFailed') })) : null, !annotationTasksQuery.isLoading && !annotationTasksQuery.isError && lineTasks.length === 0 ? (_jsxs("div", { className: "rounded-lg border bg-card p-10 text-center", "data-testid": "release-quality-empty", children: [_jsx("div", { className: "text-[15px] font-semibold", children: t('releases.detail.quality.empty') }), _jsx(Button, { className: "mt-5", asChild: true, children: _jsxs(Link, { href: annotationHref, children: [_jsx(ClipboardCheck, { className: "size-4" }), t('releases.detail.action.newAnnotation')] }) })] })) : null, lineTasks.length > 0 ? (_jsxs(_Fragment, { children: [_jsxs("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-5", children: [_jsx(ReleaseMetricCard, { label: t('releases.detail.quality.matchRate'), value: formatQualityPercent(aggregateScore), detail: t('releases.detail.quality.tasksCount').replace('{count}', formatCount(lineTasks.length)), tone: "canary" }), _jsx(ReleaseMetricCard, { label: t('releases.detail.quality.latestMatchRate'), value: formatQualityPercent(latest?.score), detail: latest?.name ?? t('common.noData') }), _jsx(ReleaseMetricCard, { label: t('releases.detail.quality.matched'), value: formatCount(matched), detail: t('releases.detail.quality.matchedHint') }), _jsx(ReleaseMetricCard, { label: t('releases.detail.quality.mismatched'), value: formatCount(mismatched), detail: t('releases.detail.quality.mismatchedHint') }), _jsx(ReleaseMetricCard, { label: t('releases.detail.quality.submitted'), value: formatCount(submitted), detail: t('releases.detail.quality.submittedHint') })] }), points.length > 0 ? (_jsxs("div", { className: "rounded-lg border bg-card p-4", children: [_jsxs("div", { className: "mb-4 flex flex-wrap items-center justify-between gap-3", children: [_jsx("div", { children: _jsx("div", { className: "text-[14px] font-semibold", children: t('releases.detail.quality.chartTitle') }) }), _jsx(QualityLegend, {})] }), _jsx(QualityMetricsChart, { data: points })] })) : (_jsx("div", { className: "rounded-lg border bg-card p-8 text-center text-sm text-muted-foreground", children: t('releases.detail.quality.noComparable') }))] })) : null] }));
+}
+function QualityLegend() {
+    const { t } = useI18n();
+    const items = [
+        { key: 'score', label: t('releases.detail.quality.matchRate') },
+    ];
+    return (_jsx("div", { className: "flex flex-wrap items-center gap-3 text-[11.5px] text-muted-foreground", children: items.map((item) => (_jsxs("div", { className: "inline-flex items-center gap-1.5", children: [_jsx("span", { className: "size-2 rounded-full", style: { background: QUALITY_LINE_COLORS[item.key] }, "aria-hidden": "true" }), _jsx("span", { children: item.label })] }, item.key))) }));
+}
+function QualityMetricsChart({ data }) {
+    const { t } = useI18n();
+    const metricLabels = useMemo(() => ({
+        score: t('releases.detail.quality.matchRate'),
+    }), [t]);
+    return (_jsx("div", { className: "h-[320px] min-w-0 w-full", children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", minWidth: 1, minHeight: 1, initialDimension: { width: 960, height: 320 }, children: _jsxs(RechartsLineChart, { data: data, margin: { top: 12, right: 16, bottom: 8, left: 0 }, children: [_jsx(CartesianGrid, { strokeDasharray: "2 3", vertical: false, stroke: "var(--border)" }), _jsx(XAxis, { dataKey: "x", axisLine: false, tickLine: false, tick: {
+                            fontSize: 10,
+                            fontFamily: 'JetBrains Mono, ui-monospace, monospace',
+                            fill: 'var(--muted-foreground)',
+                        } }), _jsx(YAxis, { axisLine: false, tickLine: false, domain: [0, 100], tick: {
+                            fontSize: 10,
+                            fontFamily: 'JetBrains Mono, ui-monospace, monospace',
+                            fill: 'var(--muted-foreground)',
+                        }, tickFormatter: (value) => `${value}%`, width: 42 }), _jsx(Tooltip, { cursor: { stroke: 'var(--border)', strokeDasharray: '4 4' }, content: (props) => (_jsx(QualityChartTooltip, { ...props, metricLabels: metricLabels, submittedLabel: t('releases.detail.quality.submitted') })) }), ['score'].map((key) => (_jsx(Line, { type: "monotone", dataKey: key, name: metricLabels[key], stroke: QUALITY_LINE_COLORS[key], strokeWidth: 2, dot: { r: 3, strokeWidth: 1.5 }, activeDot: { r: 4 }, isAnimationActive: false }, key)))] }) }) }));
+}
+function QualityChartTooltip({ active, payload, label, metricLabels, submittedLabel, }) {
+    const { t } = useI18n();
+    const formatDateTimeOrDash = useDateTimeOrDash();
+    if (!active || !payload || payload.length === 0)
+        return null;
+    const point = payload[0]?.payload;
+    if (!point)
+        return null;
+    return (_jsxs("div", { className: "min-w-[220px] rounded-md border bg-popover px-2.5 py-2 text-[12px] shadow-md", children: [_jsxs("div", { className: "mb-1 font-mono text-[10.5px] text-muted-foreground", children: [label, " \u00B7 ", formatDateTimeOrDash(point.updatedAt)] }), _jsx("div", { className: "font-semibold", children: point.name }), _jsxs("div", { className: "mt-0.5 text-[11.5px] text-muted-foreground", children: [point.releaseVariantLabel, " \u00B7 ", point.promptVersionLabel, " \u00B7 ", point.modelName] }), _jsxs("div", { className: "mt-2 space-y-0.5", children: [['score'].map((key) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "size-2 rounded-full", style: { background: QUALITY_LINE_COLORS[key] }, "aria-hidden": true }), _jsx("span", { className: "text-muted-foreground", children: metricLabels[key] }), _jsx("span", { className: "ml-auto font-mono", children: formatQualityPercent(point[key]) })] }, key))), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: t('releases.detail.quality.matched') }), _jsx("span", { className: "ml-auto font-mono", children: formatCount(point.matched) })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-muted-foreground", children: t('releases.detail.quality.mismatched') }), _jsx("span", { className: "ml-auto font-mono", children: formatCount(point.mismatched) })] }), _jsxs("div", { className: "mt-1 flex items-center gap-2 border-t pt-1", children: [_jsx("span", { className: "text-muted-foreground", children: submittedLabel }), _jsxs("span", { className: "ml-auto font-mono", children: [formatCount(point.submitted), " / ", formatCount(point.total)] })] })] })] }));
+}
+function buildReleaseEventMeta(event) {
+    const parts = [
+        event.status,
+        event.trafficRatio !== null ? `${Math.round(event.trafficRatio * 100)}%` : null,
+        event.trafficMode,
+        event.submitReason,
+    ].filter((value) => Boolean(value));
+    return parts.join(' · ') || event.id;
+}
+function formatReleaseEventVariant(event) {
+    if (!event.releaseVariantId)
+        return null;
+    const label = event.releaseVariantLabel ?? formatShortId(event.releaseVariantId);
+    const promptVersion = event.promptVersionLabel ?? formatShortId(event.promptVersionId);
+    const model = event.modelName ?? formatShortId(event.modelId);
+    return `${label} · ${promptVersion} · ${model}`;
+}
+function HistoryPane({ line, productionHistory, releaseEvents, loading, }) {
+    const { t } = useI18n();
+    const formatDateTimeOrDash = useDateTimeOrDash();
+    const items = useMemo(() => {
+        if (releaseEvents.length > 0) {
+            return releaseEvents.map((event) => ({
+                id: event.id,
+                event: event.operation,
+                title: `${event.laneType === 'production' ? t('releases.detail.history.productionLane') : t('releases.detail.history.canaryLane')} · ${event.promptVersionLabel ?? event.id.slice(0, 8)}`,
+                createdAt: event.createdAt,
+                meta: buildReleaseEventMeta(event),
+                variant: formatReleaseEventVariant(event),
+            }));
+        }
+        const prod = productionHistory.map((item) => ({
+            id: item.id,
+            event: item.eventType,
+            title: item.promptVersionLabel ?? item.id.slice(0, 8),
+            createdAt: item.createdAt,
+            meta: item.submitReason || item.status,
+            variant: null,
+        }));
+        const canary = line.canary
+            ? [
+                {
+                    id: line.canary.id,
+                    event: line.canary.status === 'running' ? 'ratio_change' : 'create_canary',
+                    title: `${line.canary.promptVersionLabel ?? line.canary.id.slice(0, 8)} · ${Math.round(line.canary.trafficRatio * 100)}%`,
+                    createdAt: line.canary.updatedAt,
+                    meta: line.canary.description ?? line.canary.status,
+                    variant: line.canary.releaseVariantLabel
+                        ? `${line.canary.releaseVariantLabel} · ${line.canary.promptVersionLabel ?? '-'} · ${line.canary.modelName ?? '-'}`
+                        : null,
+                },
+            ]
+            : [];
+        return [...canary, ...prod].sort((left, right) => (right.createdAt ? Date.parse(right.createdAt) : 0) - (left.createdAt ? Date.parse(left.createdAt) : 0));
+    }, [line.canary, productionHistory, releaseEvents, t]);
+    const showLoader = useDelayedLoading(loading);
+    if (loading) {
+        return showLoader ? _jsx(PlatformLoader, { className: "py-8", size: "sm" }) : null;
+    }
+    if (items.length === 0) {
+        return (_jsx("div", { className: "rounded-lg border bg-card p-10 text-center text-sm text-muted-foreground", children: t('releases.detail.history.empty') }));
+    }
+    return (_jsxs("div", { className: "relative space-y-3 pl-8", children: [_jsx("div", { className: "absolute bottom-0 left-[11px] top-0 w-0.5 bg-border" }), items.map((item, index) => (_jsxs("div", { className: "relative rounded-lg border bg-card", children: [_jsx("div", { className: "absolute left-[-27px] top-[18px] size-3.5 rounded-full border-2", style: {
+                            background: index === 0 ? 'var(--status-canary-dot)' : 'var(--card)',
+                            borderColor: index === 0 ? 'var(--status-canary-dot)' : 'var(--border)',
+                            boxShadow: index === 0 ? '0 0 0 4px color-mix(in srgb, var(--status-canary-dot) 25%, transparent)' : undefined,
+                        } }), _jsxs("div", { className: "flex flex-wrap items-center gap-2 border-b px-4 py-3", children: [_jsx(ReleaseEventPill, { event: item.event }), _jsx("span", { className: "text-[14px] font-semibold", children: item.title }), _jsxs("span", { className: "ml-auto font-mono text-[11.5px] text-muted-foreground", children: [formatDateTimeOrDash(item.createdAt), " \u00B7 ", item.id.slice(0, 8)] })] }), _jsxs("div", { className: "space-y-2 px-4 py-3 text-[12.5px] text-muted-foreground", children: [item.variant ? (_jsxs("div", { children: [_jsx("span", { className: "font-medium text-foreground", children: t('releases.detail.history.variant') }), _jsx("span", { className: "ml-2 font-mono", children: item.variant })] })) : null, _jsx("div", { children: item.meta })] })] }, item.id)))] }));
+}
+//# sourceMappingURL=release-line-detail-page.js.map